阿里云服务器系统时间

背景和目标

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

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、开启静态网页托管

阿里云服务器vpc

2、配置访问策略

{"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/…

whichaws /usr/local/bin/aws aws --version 看看输出的信息对不对项目指令改成这样："dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview","ls":"aws s3 ls s3://aws.yxl-upload.xyz","rm":"aws s3 rm s3://aws.yxl-upload.xyz --recursive --quiet","cp":"aws s3 cp --recursive ./dist s3://aws.yxl-upload.xyz --recursive --quiet", cp 拷贝复制dist代码到桶里"invalidate":"aws cloudfront create-invalidation --distribution-id E2OKPVZM16VN32 --paths /*", 刷新cdn 缓存"deploy":"npm run build && unset HTTP_PROXY HTTPS_PROXY http_proxy https_proxy && npm run cp && npm run invalidate"

具体的指令查询，可以在这里查到docs.aws.amazon.com/cli/latest/…

至此完结！

阿里云服务器没有显卡

8. 实用资源 - 参考链接和工具

AWS web 服务：www.bilibili.com/video/BV19s…

饥荒云服务器搭建教程