# 亚马逊云上部署vue代码+nodeJS跨域配置
## 需求描述
客户想要构建一个新的客户站点,前端通过Https来访问VUE界面,然后VUE跨域Https访问后端的接口服务,通过NodeJS来提供后台服务。假定是全新的服务,本文从域名申请配置、CDN分配配置、Demo代码等方面都会进行描述,旨在帮助后续有同样需求的同学们可以一起交流参考~
## 技术架构概要
### 前端(VUE)(front.xxx.com)
![image.png](https://dev-media.amazoncloud.cn/2eee824e83fc4f79b85b62607ef0a5e4_image.png "image.png")
### 后端(nodeJS)(api.xxx.com)
![image.png](https://dev-media.amazoncloud.cn/e72cdb1ae39f44139545433158a70449_image.png "image.png")
## 操作步骤
### 前提条件
因为中国区有ICP备案等要求,所以本次实验都是使用aws海外区弗吉尼亚北部(us-east-1)来进行实验。
### 域名购买申请
通过Route53服务来进行域名申请:
![image.png](https://dev-media.amazoncloud.cn/1fea595025244968aff190c88e87cca1_image.png "image.png")
购买的步骤就不赘述,主要联系人的电话特别是邮箱一定要正确,因为可以通过邮箱来验证一些信息。购买好域名之后可以在域的菜单下面看到注册好的域名。
![image.png](https://dev-media.amazoncloud.cn/ad08e8f7d5e64e218dffadca44547bdc_image.png "image.png")
### 托管区域配置
如果域名是在aws购买的,域名购买好之后,会在托管区自动创建域名解析的记录。其他供应商购买的域名需要手动配置一下。
![image.png](https://dev-media.amazoncloud.cn/6476881c65eb4343a9387cc5aaa4aa40_image.png "image.png")
下面两条记录会自动生成(NS和SOA):
![image.png](https://dev-media.amazoncloud.cn/64f8a78768d3417b95d29a685db8ac03_image.png "image.png")
### 安装VUE开发环境(Windows)
<https://www.jianshu.com/p/0e5e461ec89e>
#### 官网下载最新版本并安装
<https://nodejs.org/en/download/>
![image.png](https://dev-media.amazoncloud.cn/1d95c6387af4420e85d39223ccbdec3b_image.png "image.png")
#### 检查node和npm版本号
![image.png](https://dev-media.amazoncloud.cn/84ee25fe692f49508e87fa875df938d8_image.png "image.png")
分别输入node -v和npm -v命令进行node的版本号和npm的版本号的查看。
#### 配置npm安装全局模块路径与缓存路径
npm config set perfix "D:\Program Files\nodejs\node_global"
#### npm config set cache "D:\\Program Files\\nodejs\\node_cache"配置镜像站
npm config set registry=http\://registry.npm.taobao.org检查一下镜像站是否ok
npm config get registry更新一下npm
#### npm install npm -gWindows环境变量配置
![image.png](https://dev-media.amazoncloud.cn/7cebe2c764b2486c93d4ec98128baec9_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/c3d74ce3f69c4a028e25b1cf3af49b5c_image.png "image.png")
#### 安装vue-cli
vue-cli 是一个官方发布vue.js 项目脚手架,一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
#### npm install -g @vue/cli安装vue
#### npm install vue -g安装Vue-router
这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。
### npm install vue-router -g运行Demo程序
#### 初始化
#### npm install -g @vue/cli-init
![image.png](https://dev-media.amazoncloud.cn/d4911fbba9e243008763b87de32fdf5b_image.png "image.png")
安装依赖,生成静态文件
安装依赖
npm install
运行
npm run dev
打包
npm run build打开dist文件夹下新生成的index.html文件,浏览器看一下
![image.png](https://dev-media.amazoncloud.cn/224ec9679867445ca93681273cc86949_image.png "image.png")
dist文件夹的内容需要注意,上传到s3的时候就需要这个文件夹的所有内容
### 跨域代码准备
增加一个文件apitest.html,需要注意的是,api.xxx.com需要替换为实际的后端域名。
关于跨域本身,可以参考这篇文章,讲解的比较详细。
<https://bbs.huaweicloud.com/blogs/364753>
### 前端代码部署在S3
这部分内容主要参考aws官网的教程,比较详细。
[https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html](https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html%E2%80%8B%E2%80%8B)
![image.png](https://dev-media.amazoncloud.cn/ae8c6418a37148709abc9eb1b33d1e50_image.png "image.png")
#### 创建存储通
这里的名称建议写成域名[xxx.com](http://xxx.com/)
![](https://docimg10.docs.qq.com/image/AgAABVozgxOaONcZg3RJpJjzRO5zUA\\_6.png?w=1148\\&h=620)解决阻止所有公开访问,同时了解这样的设置可能会导致此存储通及其中的对象被公开。其他默认即可。
![image.png](https://dev-media.amazoncloud.cn/a2efac1e9d2843d4bcf449851e042fdc_image.png "image.png")
#### 启用静态网站托管
![image.png](https://dev-media.amazoncloud.cn/69d2e9be5e9b4cb8ab0b00419b89cd51_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/bb8a286d350f4f48bb0a2398cf0a3f50_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/012233e8be53421e84df6adf5f705b77_image.png "image.png")
按照上述进行配置,完成之后就可以看到静态网站的终端节点。
![image.png](https://dev-media.amazoncloud.cn/a02e9f684b814399ba8ff908b75dae07_image.png "image.png")
添加可使您的存储桶内容公开可用的存储桶策略
![image.png](https://dev-media.amazoncloud.cn/bfc0bcb14ece46559d60e2f0c2788885_image.png "image.png")
```
{
"Version": "2012-10-17",
"Statement": \\[
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "\\*",
"Action": \\[
"s3:GetObject"
],
"Resource": \\[
"arn:aws:s3:::Bucket-Name/\\*"
]
}
]
}
```
在上述示例存储桶策略中,Bucket-Name 是存储桶名称的占位符。要将此存储桶策略用于您自己的存储桶,您必须更新此名称以匹配您的存储桶名称。
#### 上传文件
![image.png](https://dev-media.amazoncloud.cn/ca61b394cf564388a19a9df280090c6e_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/e4e24fbb1e104122862b27748539c0ff_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/9681efe0c50749a287343f3f8311c5f1_image.png "image.png")
#### 终端节点测试访问
![image.png](https://dev-media.amazoncloud.cn/2fb7cf9135454b40825cb7df820fbc8a_image.png "image.png")
### Cloudfront(CDN)配置
#### SSL证书申请
![image.png](https://dev-media.amazoncloud.cn/823f703ca0eb46de9295145d23b74c94_image.png "image.png")
使用AWS Certificate Manager (ACM)服务,来进行免费证书申请:
![](https://docimg10.docs.qq.com/image/AgAABVozgxOraNCfHO5GMYpLzyzzzPmV.png?w=1134\\&h=354)建议请求一个根域名的证书,这样所有子域名也可以公用证书。当然,还是要跟实际情况有关进行选择。
![image.png](https://dev-media.amazoncloud.cn/b572c64d545e447ea27a85d2d86dc091_image.png "image.png")
创建好之后,需要在Route53中创建记录来进行校验。稍等几分钟就会修改状态为【成功】,说明证书已经ok了\~\~\~Route53里面的记录也可以删掉,因为这只是临时验证使用的记录。
![image.png](https://dev-media.amazoncloud.cn/a9029585095f4e06886267ebca133c7b_image.png "image.png")
#### 创建分配
![image.png](https://dev-media.amazoncloud.cn/b5ccbcce12884b7998a8e1cc0b7898c7_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/011f367c99304f48b343cf8b54406c26_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/24c021575677433faaed416dc6f34e93_image.png "image.png")
#### 备用域名配置
回到Route53,进行域名的配置
![image.png](https://dev-media.amazoncloud.cn/365e62c7112d4eb08b7f57b17da02981_image.png "image.png")
![image.png](https://dev-media.amazoncloud.cn/490a9fd52f8e4f2f8b8a2bede8c092d8_image.png "image.png")
#### 测试访问前端域名(front.xxx.com)
![image.png](https://dev-media.amazoncloud.cn/09d11bd0c9c945b1b308f3d5096842a0_image.png "image.png")
### nodeJS服务部署
#### 启动EC2
首先启动一台EC2,配置根据实际情况即可,并配置好SSH服务。这部分因为不是本次的重点所以省略。
#### 安装nodeJS
<http://oxxd.github.io/nodejs-aws/>
#### 准备Demo程序
在8080端口启动一个远程服务:
```
//导入 http 模块
var http = require ("http");
//开启一个监听事件,每次 HTTP 请求都会触发这个事件日
http.createServer ( function ( req , res ){
res.setHeader("Access-Control-Allow-Origin","\\*");
//把编码设置成 utf -8
res.write('');
//设置响应体信息
res.write("nodejs 服务器成功");
//结束事件
res.end();
//设置监听端口号
}). listen (8080);其中,res.setHeader("Access-Control-Allow-Origin","\\*");保证跨域访问。
```
#### 启动nodeJS服务
#### nohup node app.js &安全组8080端口配置
![image.png](https://dev-media.amazoncloud.cn/0a87eab7cfc842a4ade4bb48ab77c09f_image.png "image.png")
### ALB负载均衡器配置
#### 目标组配置
![](https://docimg10.docs.qq.com/image/AgAABVozgxMNRRldJDVI87ZvasR2CrQ8.png?w=1126\\&h=482)
![image.png](https://dev-media.amazoncloud.cn/0e6c51b7a33246d387b5b6ed9d57a1d2_image.png "image.png")
注意保证目标组要是Healthy,如果不对可能是EC2本身的网络设置存在问题。
#### ALB配置
![image.png](https://dev-media.amazoncloud.cn/1b661911d5da41e6ad149f2691832d1a_image.png "image.png")注意证书不要选择错了!这样https的服务在这里转发到目标群组的EC2的8080端口。
#### ALB访问测试
![image.png](https://dev-media.amazoncloud.cn/6ace652fcc0f4174923c8a96a56d8014_image.png "image.png")
访问ALB的DNS域名:
### 最终整体测试
访问<https://front.xxx.com/apitest.html>
从api.xxx.com拿到了数据,表示跨域成功\~\~\~
![image.png](https://dev-media.amazoncloud.cn/fff5ad2327eb4199bf302dab0c0b8047_image.png "image.png")
## 小结
本文覆盖了aws的route53,s3,cloudfront,ec2,alb等服务,有些部分因为篇幅原因有些省略,读者有些不清晰的地方可以私信或者查询一下aws官网资料。vue+nodeJS组合是国内前端的主流框架,本文也希望能够抛砖引玉给大家带来更多的思考和实践。
## 关于作者
**刘振华**
亚马逊云科技高级解决方案架构师,本硕均毕业于上海交通大学。加入AWS之前,曾就职于 埃森哲 和 华为公司,主导过多个大型软件项目的设计、开发和项目管理工作。擅长SaaS 领域的理论和落地实践,致力于向客户提供相关领域的技术咨询和赋能工作。目前主要是工作是加速中国区的SaaS客户的转型速度和促进亚马逊云科技SaaS生态发展等事宜。