0
点赞
收藏
分享

微信扫一扫

aws云上部署vue代码+nodeJS跨域配置

大致需求

客户想要构建一个新的客户站点,前端通过Https来访问VUE界面,然后VUE跨域Https访问后端的接口服务,通过NodeJS来提供后台服务。假定是全新的服务,本文从域名申请配置、CDN分配配置、Demo代码等方面都会进行描述,旨在帮助后续有同样的同学们可以一起交流参考~

技术架构概要

前端(VUE)(front.xxx.com)

aws云上部署vue代码+nodeJS跨域配置_跨域

后端(nodeJS)(api.xxx.com)

aws云上部署vue代码+nodeJS跨域配置_nodejs_02

操作步骤

前提条件

因为中国区有ICP备案等要求,所以本次实验都是使用aws海外区弗吉尼亚北部(us-east-1)来进行实验。

域名购买申请

通过Route53服务来进行域名申请:

aws云上部署vue代码+nodeJS跨域配置_nodejs_03

aws云上部署vue代码+nodeJS跨域配置_route53_04

购买的步骤就不赘述,主要联系人的电话特别是邮箱一定要正确,因为可以通过邮箱来验证一些信息。购买好域名之后可以在域的菜单下面看到注册好的域名。

aws云上部署vue代码+nodeJS跨域配置_跨域_05

托管区域配置

如果域名是在aws购买的,域名购买好之后,会在托管区自动创建域名解析的记录。其他供应商购买的域名需要手动配置一下。

aws云上部署vue代码+nodeJS跨域配置_vue_06

下面两条记录会自动生成(NS和SOA):

aws云上部署vue代码+nodeJS跨域配置_vue_07

安装VUE开发环境(Windows)

​​https://www.jianshu.com/p/0e5e461ec89e​​

官网下载最新版本并安装

​​https://nodejs.org/en/download/​​

aws云上部署vue代码+nodeJS跨域配置_nodejs_08

检查node和npm版本号

分别输入​node -v​​npm -v​命令进行node的版本号和npm的版本号的查看。

aws云上部署vue代码+nodeJS跨域配置_跨域_09

配置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 -g

Windows环境变量配置

aws云上部署vue代码+nodeJS跨域配置_route53_10

aws云上部署vue代码+nodeJS跨域配置_跨域_11

安装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

aws云上部署vue代码+nodeJS跨域配置_跨域_12

运行Demo程序

初始化

npm install -g @vue/cli-init

aws云上部署vue代码+nodeJS跨域配置_nodejs_13

安装依赖,生成静态文件

安装依赖
npm install
运行
npm run dev
打包
npm run build

打开dist文件夹下新生成的index.html文件,浏览器看一下

aws云上部署vue代码+nodeJS跨域配置_vue_14

dist文件夹的内容需要注意,上传到s3的时候就需要这个文件夹的所有内容


举报

相关推荐

0 条评论