在 Amazon S3 上配置静态网站

一、创建 S3

起个名字

二、开启公共访问

在【权限】里打开公有访问

取消勾选所有公开访问，并选择我了解

编辑存储桶策略，允许公开访问

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::[bucket-name]/*"
    }
  ]
}

三、开启静态网站托管

在【属性】里开启静态网站托管

前端用 vue 的话，索引文档和错误文档都要设置成 index.html

四、使用 CloudFront

CloudFront 就是 AWS 上的 CDN，他可以分配各种源，比如 EC2、S3 等。AWS CloudFront 分配各种源

我们这里就直接在 S3 里选刚才创建的源即可。

创建完成后，默认会生成一个 aws 的分配域名，如果配置成功的话，访问这个域名就能访问到网站。

4.1 刷新缓存

如果用 CDN 的话就会涉及到更新源文件后，刷新 CDN 节点的处理。使檔案失效 - Amazon CloudFront

这里可以手动创建失效。

也可以使用 aws cli 配合的 CI/CD 自动处理，我们后面会说。

aws cloudfront create-invalidation

五、配置 https 证书

AWS 的 CloudFront 即 CDN 的访问是必须要配置证书的，而 AWS 本身提供了证书的管理及申请，公有证书的全免费，而且可以申请泛域名证书和多域名证书，非常 nice ~

AWS SSL/TLS 证书管理服务

申请也很简单

回到 CloudFront 填写备用域名即自己的域名并关联刚才的证书，现在就可以使用 https+自己的域名访问网站了。

六、AWS CLIi 安装及使用

aws 提供了命令行工具，aws-cli，它可以帮你搭配 CI/CD 自动去发布部署网站，毕竟不能更新网站后手动上传到 S3，太浪费时间了。
下面只是一些简单的安装说明，可以直接跳过。

6.1 Liunx 安装

Installing AWS CLI

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

# 加软连接，防止在 Jenkins 中找不到命令
ln -s /usr/local/bin/aws /bin/aws

6.2 配置

aws configure

需要 IAM 账号下创建的 key 和 secret，默认区就是 en-west-3

6.3 使用

6.3.1 S3

AWS 命令行界面(CLI)

# 查看 bucket 文件列表
aws s3 ls s3://bucket-name

# 上传文件 - 递归上传文件
aws s3 cp myfolder s3://bucket-name/myfolder --recursive

七、CI/CD

原理基本上都是调用 aws-cli ，Github Actions 里自带了 cli，可以直接使用，而其他的比如 Jenkins，就得自己在主机上安装 aws-cli，如何安装见上面 👆🏻

7.1 Jenkins

#!/bin/bash
# 代码构建命令，根据项目改
npm install
npm run build

# aws 文件上传
aws s3 sync ./dist s3://[bucket-name]
# 刷新缓存指定目录缓存
aws cloudfront create-invalidation --distribution-id [distribution-id] --paths "/*"

4.2 Github

name: 'Build Test WebSite'

on:
    push:
        branches:
            - develop

jobs:
    build:
        name: Build
        runs-on: ubuntu-22.04

        steps:
            - name: Checkout
              uses: actions/checkout@v3
              with:
                  ref: develop
            - name: Use Node
              uses: actions/setup-node@v3
              with:
                  node-version: '10.24.1'
            - name: Use AWS
            	uses: aws-actions/configure-aws-credentials@v1
              with:
                aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                aws-region: us-east-1
            - name: Build
              run: |
                  npm install
                  npm run build
            - name: Deploy
              run: aws s3 sync ./dist s3://[bucket-name]
            # 刷新缓存指定目录缓存
            - name: Clean
              run: aws cloudfront create-invalidation --distribution-id [distribution-id] --paths "/*"

八、问题

AWS 的 S3 静态网站无法解决 vue 项目的路由问题，导致刷新后就会回到首页，待解决