【前端学部署】第一篇：几块钱部署一个有域名的静态网站

背景和目标

很多前端朋友都不太懂部署这一块，是否能独立完成一个项目，前端、后端、部署已经越来越能体现一个人的竞争力了。其中如何给自己开发的项目进行部署是其中关键的能力之一。这是我自学部署的第一篇，最简单的开始。就是如何部署一个简单的静态网站

2. 前期准备 - 技术栈、AWS账号、域名等

纯静态网站的部署方案，总共算起来有三种：

1、免费静态托管，一步到位，像Netlify - 支持Git集成，自动部署，CDN加速，Vercel专为前端优化，支持Next.js等框架，GitHub Pages直接从GitHub仓库部署。

2、云服务器，AWS S3 +Route 53 + CloudFront，腾讯云COS,阿里云OOS

3、普通服务器，Nginx比较常用，还有阿帕奇，VPS/云服务器 - 完全控制权

今天要实践的是第二种。其实从1到3，是从容易到难得过程

在真正部署这之前，需要你完成二件事：

1、注册aws账号。

2、自己去买个域名。不贵，第一年几块钱。我的域名是 yxl-upload.xyz

整体的网站访问方式是这样的。

1、用户请求后，会进行DNS解析，在你提供商里配置域名解析，转到AWS Route53 的解析服务器。

2、AWS Route53 解析后引导到AWS S3的index.html。

3、CloudFront 自然有附带的功能，比如cdn,他能对访问网站起到加速作用。

这样就完成了网站的访问。

3. AWS服务配置 - S3和Route 53

S3是什么？

S3（Simple Storage Service）是AMS提供的对象存储服务。每个云服务商都有，比如腾讯云有，阿里云也有，名字不一样，但是都是对象存储服务。那什么是对象存储呢？我们知道对象，一个object，有key,有value，所谓对象存储，就是指通过key来访问value的存储形式。我们会把图片，视频这些资源放到这里，通过key去访问资源，这个key就是对应资源的唯一标识。

今天我们把静态项目放进去。

好了，我的之前已经创建好一个桶了，效果如下。

注意这里桶的名字必须是你域名的名字，这里我选择用二级域名。桶名字直接用域名这样可以减少一些路由配置。

Route 53 是什么？

前一节已经写了Route 53 大概作用，就是他会解析域名引导到S3，S3有我们网站文件，那为什么是53呢？因为dns服务解析默认端口是53。所以就是Route53。像下面的如图创建了Route 53 托管区。

4. 实战部署过程 - 具体操作步骤

第一步：新建S3桶

1、阻止所有公开访问

2、开启静态网页托管

2、配置访问策略

js 复制代码

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::aws.yxl-upload.xyz/*"
        }
    ]
}

3、配置公有访问权限

4、把静态项目上传，我的vite react 模板项目

这样呢，我们通过访问aws.yxl-upload.xyz.s3-website-ap-southeast-2.amazonaws.com 就可以访问到项目了

但是这样呢链接太长了，我们希望通过aws.yxl-upload.xyz 就能访问到

这时候就是配置Route 53的时候了,同样创建

5、Route 53

它会默认有ns 和soa ,ns 就是aws自己dns 解析服务器。

我们要把aws dns解析配置到域名供应商dns 配置那里，这样可以路由到aws

我在腾讯云买的域名，自然配置如下

我们回到AMS Route 53 我们需要添加A记录，A记录是干嘛用的呢，它会把域名直接路由到s3

好了，现在访问域名就可以了！

6、SSL/TSL 证书管理申请免费的HTTPS证书

我们希望更加进一步，让它能更进一步。

这里的状态要转成已验证是有效的。我们需要把这个正式创建cname记录加到route S3里，没过一会儿他就是已验证了！

接下来加上cloudfront 有cdn 加速

这里要注意源的配置一定是要用桶属性最下面那个源

好了这样 aws.yxl-upload.xyz/ 就生效了。

最后我们希望改了项目代码后，通过cli能够更新项目

AMS账号系统是个很大权限的账号，所以我们喜欢更新项目的权限只限制在运维更新代码这里，为此我们要进入AMS IAM进行配置,添加用户，这个用户只有我们想要给的权限

我们给他admin权限，这个admin可以通过指令上传文件，同时生成密钥。

现在我们尝试用cli上传更新项目

我用vite 重新创建一个项目，之前的项目不知道哪里去了。这里需要用到aws的指令，所以需要安装aws，安装教程在这里docs.aws.amazon.com/cli/latest/...

cli 复制代码

which aws
/usr/local/bin/aws
aws --version
看看输出的信息对不对