亚马逊云上部署vue代码+nodeJS跨域配置

# 亚马逊云上部署vue代码+nodeJS跨域配置 ## 需求描述 客户想要构建一个新的客户站点，前端通过Https来访问VUE界面，然后VUE跨域Https访问后端的接口服务，通过NodeJS来提供后台服务。假定是全新的服务，本文从域名申请配置、CDN分配配置、Demo代码等方面都会进行描述，旨在帮助后续有同样需求的同学们可以一起交流参考~ ## 技术架构概要 ### 前端（VUE）（front.xxx.com）  ### 后端（nodeJS）（api.xxx.com）  ## 操作步骤 ### 前提条件 因为中国区有ICP备案等要求，所以本次实验都是使用aws海外区弗吉尼亚北部（us-east-1）来进行实验。 ### 域名购买申请 通过Route53服务来进行域名申请：  购买的步骤就不赘述，主要联系人的电话特别是邮箱一定要正确，因为可以通过邮箱来验证一些信息。购买好域名之后可以在域的菜单下面看到注册好的域名。  ### 托管区域配置 如果域名是在aws购买的，域名购买好之后，会在托管区自动创建域名解析的记录。其他供应商购买的域名需要手动配置一下。  下面两条记录会自动生成（NS和SOA）：  ### 安装VUE开发环境（Windows） <https://www.jianshu.com/p/0e5e461ec89e> #### 官网下载最新版本并安装 <https://nodejs.org/en/download/>  #### 检查node和npm版本号  分别输入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环境变量配置   #### 安装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  安装依赖，生成静态文件 安装依赖 npm install 运行 npm run dev 打包 npm run build打开dist文件夹下新生成的index.html文件，浏览器看一下  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)  #### 创建存储通 这里的名称建议写成域名[xxx.com](http://xxx.com/) 解决阻止所有公开访问，同时了解这样的设置可能会导致此存储通及其中的对象被公开。其他默认即可。  #### 启用静态网站托管    按照上述进行配置，完成之后就可以看到静态网站的终端节点。  添加可使您的存储桶内容公开可用的存储桶策略  ``` {     "Version": "2012-10-17",     "Statement": \\[         {             "Sid": "PublicReadGetObject",             "Effect": "Allow",             "Principal": "\\*",             "Action": \\[                 "s3:GetObject"             ],             "Resource": \\[                 "arn:aws:s3:::Bucket-Name/\\*"             ]         }     ] } ``` 在上述示例存储桶策略中，Bucket-Name 是存储桶名称的占位符。要将此存储桶策略用于您自己的存储桶，您必须更新此名称以匹配您的存储桶名称。 #### 上传文件    #### 终端节点测试访问  ### Cloudfront（CDN）配置 #### SSL证书申请  使用AWS Certificate Manager (ACM)服务，来进行免费证书申请： 建议请求一个根域名的证书，这样所有子域名也可以公用证书。当然，还是要跟实际情况有关进行选择。  创建好之后，需要在Route53中创建记录来进行校验。稍等几分钟就会修改状态为【成功】，说明证书已经ok了\~\~\~Route53里面的记录也可以删掉，因为这只是临时验证使用的记录。  #### 创建分配    #### 备用域名配置 回到Route53，进行域名的配置   #### 测试访问前端域名（front.xxx.com）  ### 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端口配置  ### ALB负载均衡器配置 #### 目标组配置   注意保证目标组要是Healthy，如果不对可能是EC2本身的网络设置存在问题。 #### ALB配置 注意证书不要选择错了！这样https的服务在这里转发到目标群组的EC2的8080端口。 #### ALB访问测试  访问ALB的DNS域名： ### 最终整体测试 访问<https://front.xxx.com/apitest.html> 从api.xxx.com拿到了数据，表示跨域成功\~\~\~  ## 小结 本文覆盖了aws的route53，s3，cloudfront，ec2，alb等服务，有些部分因为篇幅原因有些省略，读者有些不清晰的地方可以私信或者查询一下aws官网资料。vue+nodeJS组合是国内前端的主流框架，本文也希望能够抛砖引玉给大家带来更多的思考和实践。 ## 关于作者 **刘振华** 亚马逊云科技高级解决方案架构师，本硕均毕业于上海交通大学。加入AWS之前，曾就职于 埃森哲 和 华为公司，主导过多个大型软件项目的设计、开发和项目管理工作。擅长SaaS 领域的理论和落地实践，致力于向客户提供相关领域的技术咨询和赋能工作。目前主要是工作是加速中国区的SaaS客户的转型速度和促进亚马逊云科技SaaS生态发展等事宜。