大致需求
客户想要构建一个新的客户站点,前端通过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 -g
Windows环境变量配置
安装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的时候就需要这个文件夹的所有内容