[Day28] 前端部署网页的方式 (Vercel, AWS S3 & Netlify)

今天要和大家介绍的是前端部署网页的方法，分别是以下三个：

这三个方法都非常的简单可以直接透过 GUI 的方式或者 CLI 的方式部署网页，也都能搭配 Git 达到自动化部署，重点是它们三个都有免费的方案供大家在非营利的专案或是产品初期用近乎无成本的方式快速将自己的网站上线。

我们马上开始进入正文吧！(今天可能没什麽"文"，很多都是步骤截图 XD)

Vercel

Step 0 帐号注册

帐号注册我就不多说了，相信大家都是有办法自行完成这一步的。

Step 1 新增专案

在 Overview 分页中点选下图中的 New Project 或 Create a New Project

到这边有两个方式可以建立 Vercel 的专案

从 GitHub, GitLab 或 Bitbucket 引入现成的专案
从模板中 Clone 一个

那因为要示范的专案是放在 GitHub 所以我这边选择 Continue with GitHub

接着再按 Add GitHub Org or Account 的选项，再来就是授权的画面，相信大家也是知道要怎麽授权的

授权完後，就可以选择引入 GitHub 上的专案了

Step 2 专案设定

到这边就是针对这个专案做设定，例如第一个区块是询问是否要创建一个团队 (Team)，这样这个 Vercel 专案就不属於你个人的而是团队的，不过因为现在没这个需求，所以我们就选择 Skip

接着第二个区块 Configure Project 是设定专案的名称、专案的框架、环境变数以及 Build 或是 Install 的命令，那因为专案的框架选择了 Vue.js ，所以 Build 以及 Install 的指令它自动会根据我们选的框架去做预设值，简单讲就是有需求再调整就好，不然都不用做任何设定！

Step 3 部署成功

在上一步按下 Deploy 後我们就静静等待部署即可，没意外过一阵子後就会看到下面这个令人振奋的画面了！

可以按下 Go to Dashboard 查看专案的资讯以及可以点击 Dashboard 中的 Visit 浏览你的网站！

Vercel 的自动化部署

Vercel 有一个非常方便的功能，就是如果你的专案是来自 GitHub、GitLab 或者 Bitbucket 那麽只要 default branch 有更新，Vercel 就会自动触发开始部署专案，甚至还有预览部署 (Preview deployment)

为了示范这个功能，我随便添加一行 Vercel 的文字，接着就发了 PR

接着你就可以在 PR 的页面看到 Vercel 的机器人告诉你已经部署了一个 Preview 环境的网站以及它的网址。

这张图我当下忘了截，是事後才截的，所以才会显示 Merged

或者你也能在 Vercel 上看到 Preview Deployments 的相关资讯。

以上就是 Vercel 的部署操作流程。

AWS S3

Step 0 帐号注册

帐号注册我也就不多说了，相信大家都是有办法自行完成这一步的。

Step 1 建立储存贮体 (Bucket)

储存贮体，英文叫作「Bucket」，是储存在 Amazon S3 中物件的容器，可以用来托管静态网站或储存静态资源 (图片、json data 等)

点选建立储存贮体 按钮

输入储存贮体的名称以及选择要存放的 AWS 区域，通常会选择东京或者是新加坡，填写完後就可以先跳过其他设定直接拉到最下面按下建立储存贮体

Step 2 上传打包档案

建立完储存贮体後，回到列表点选你刚才建立的储存贮体，会看到下面这个画面。

接着，我们需要先在本地端将专案打包输出，并将打包的档案上传至 S3 上。

也可以使用 AWS CLI 上传档案，有兴趣的朋友可以参考这篇 (Using high-level (s3) commands with the AWS CLI - AWS Command Line Interface)。

Step 3 设定存取权

因为目前储存贮体是属於非公开的，所以其他人是无法浏览我们的资源，因此我们要将权限改成任何人皆能存取此储存贮体。

完全公开是有一定的风险，所以如果专案的有需要特别控制浏览权限的需求，也可以参考这篇(使用原始存取身分 (OAI) 限制对 Amazon S3 内容的存取 - Amazon CloudFront)。

点选许可的分页会看到「封锁公有存取权 (储存贮体设定)」的区块，接着点选编辑 进到编辑页面

点掉封锁所有公开存取权 (结果会像下面这样) 後就能储存变更回到上一页

一样在属性的这页会有一个「储存贮体政策」的区块，接着点选编辑 进到编辑页面

将以下设定档贴上，并将「储存贮体名称」替换成当前储存贮体的名称後就能储存变更回到上一页

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<储存贮体名称>/*"
        }
    ]
}