1. 总体流程
1.1 增加上线需要的适配代码
(1) 静态资源需要单独的静态域名, 例如: s.xxx.com, 所以需要在代码里增加对环境的判断
(2) 开发人员提交pull request请求
(3) 管理员审核,通过后合并到master分支上
1.2 生产环境配置
(1) 安装NodeJs: 作为一些工具的依赖环境
(2) 安装Yarn : 用来在线上安装依赖包
(3) 安装Git: 安装后配置权限 把我们的代码从远程仓库拉下来
(4) 安装Nginx: 作为请求的反向代理, 有了它可以让几种类型的文件和服务共用一个80端口
1.3 代码发布
(1) 拉取最新的master分支上的代码
(2) 通过yarn做初始化
(3) 执行线上环境的打包编译, dist目录下就是打包后的项目
(4) 复制dist目录到目标目录
1.4 Nginx和域名配置
通过Nginx把静态文件和数据接口分布到不同的位置
(1) Nginx中vHost的配置: Nginx对域名的处理方式, 配置完后服务器就能处理发过来的请求了
(2) 通过指定hosts的方式做线上回归测试(本地配置host)
(3) 更改域名解析: 外网通过域名访问, 不用指定host了
2. 适配代码
// webpack.config.js 部分关键代码
let WEBPACK_ENV= process.env.WEBPACK_ENV || 'dev';
module.exports = {
output: {
publicPath: WEBPACK_ENV === 'dev' ? '/dist/' : '//s.jianliwu.com/mmall/dist/'
},
package.json
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server",
"dist": "WEBPACK_ENV=online node_modules/.bin/webpack -p",
"dist_win": "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
},
3. 服务器配置
3.1 连接服务器
方法1: ssh [email protected], 然后输入密码(短密码6位的, 远程连接密码)
方法2: 我是阿里云的服务器,没有域名,选择workBench远程连接,通过用户名(root)密码(这个是长密码: 服务器的登陆密码)连接
方法3: ssh root@你买的服务的公网ip, 然后输入密码(短密码6位的)
连接上后会出现: [root@izm5e8hkjaljfk8e4iyyv9fz ~]#
然后你输入: ls -al命令查看所有的目录(验证是否连接成功)
3.2 安装NodeJs
(1) 官网找和你的项目对应的版本(Linux x64 tar gz), 复制链接地址
(2) 去服务器命令行, wget+链接地址
wget https://nodejs.org/download/release/v12.16.1/node-v12.16.1-linux-x64.tar.gz
服务器就开始自动下载nodejs
完成后通过ls命令查看目录, 发现多了 node-v12.16.1-linux-x64.tar.gz
(3) 解压:
tar -xzvf node-v12.16.1-linux-x64.tar.gz
再ls一下, 找到这个解压后的文件夹: node-v12.16.1-linux-x64
(4) 把它移动到服务器上经常放文件的位置: /usr/local
mv node-v12.16.1-linux-x64 /usr/local/node
(5) 进去检查:
cd /user/local
ls
cd node/
cd bin/
./node -v(会打印出版本, 但是这个命令只能在node目录下执行)
(6) 把node和npm命令配置到服务器全局环境
ln -s /usr/local/node/bin/node /usr/local/bin/
ln -s /usr/local/node/bin/npm /usr/local/bin/
(ln -s相当于做了一个快捷访问方式, 第一个参数是源地址, 第二个是目标地址,/usr/local/bin 这里面的路径都是可以去全局访问的)
(7) 再次检查
cd后面什么都不加,就会到用户目录,
cd
node -v
npm -v
如果都执行了, Node安装完毕
3.3 安装Yarn
进入官网,找到CentOS版本的, 它有3条命令,第二条是安装node,我们已经装过了, 直接执行1和3
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn
检查
yarn -v
3.4 安装git:
yum install git
(1) 检查
git --version
(2) 配置ssh(输入下面的命令, 然后一路回车)
ssh-keygen -t rsa -C [email protected]
(3) 去gitee里面添加"部署公钥", 它是只读的不能修改, 适合发布使用
查看刚才生成的公钥
cat ~/.ssh/id_rsa.pub
(4) 克隆这个项目, 检查ssh是否配置成功
cd /表示切换到根目录
根目录下创建product放打包后的代码, developer放开发相关的代码
cd /
mkdir developer
mkdir product
cd developer
mkdir git-repository
cd git-repository
git clone + 项目地址
ls 看看有没有克隆下来
3.5 安装Nginx
yum install nginx
检查: nginx -v
注意: node-sass需要一个c++的编译工具, 这个工具Linux系统上自带, 不用自己安装
4. 代码发布:
(1) 初始化和打包
进入git-respository目录, 我克隆的项目目录是: mmall
cd mmall
git pull
git branch
yarn
yarn run dist
ls (检查有没有dist目录)
(2) 复制dist目录到目标目录(一个专门放打包后的代码的目录, 自己创建)
cd product
mkdir front
cd front
mkdir mmall
cd mmall
cp -R /developer/git-repository/mmall/dist ./
ls (检查dist有没有移动过来)
(3) 写一个自动去发布的脚本, 把写好的shell脚本放入服务器的developer目录
cd /developer/
vim mmall-deploy.sh
按i进入输入模式, 然后把脚本内容粘贴过来, 然后按Esc, 输入:wq保存并退出
(4) 执行脚本
- 进入/developer/目录, 执行:
./mmall-deploy.sh mmall
- 错误:
Permission denied
(权限不够) - 查看执行权限:
ls -al
- 打印:
-rw-r--r-- 1 root root 862 Apr 6 14:52 mmall-deploy.sh
(可读可写但是不能执行) - 修改权限:
chmod 775 mmall-deploy.sh
- 再次查看权限,打印:
-rwxrwxr-x 1 root root 862 Apr 6 14:52 mmall-deploy.sh
(变成可执行的) - 执行:
./mmall-deploy.sh mmall
(5)再次测试
8. 删除目录文件夹的dist: rm -rf /product/front/mmall/dist/
9. 检查是否删除: cd /product/front/mmall
, 然后 ls
10. cd -
表示跳回上一次的目录, 如果你是从/developer/跳过来的, 就跳回/developer/
11. 进入developer目录后再次发布: ./mmall-deploy.sh mmall
5. Nginx配置
(1) 进入Nginx目录,如果通过yum安装,目录在/etc/nginx/
(2) 创建自己的虚拟主机配置文件 mkdir vhost
(3) 编辑nginx主文件: vim nginx.conf
找到最下面, 添加: include vhost/*.conf;
(引入我们创建的vhost目录)
(4) 进入vhost,这里要做2个域名解析,一个是页面和接口的,另一个是静态的域名
touch adminv2.jianliwu.com.conf
touch s.jinaliwu.com.conf
- 创建这2个文件:(touch创建文件不用进入, vim会自动进入)
- 然后去编辑器去写这2个文件(方便些), 完成后
- 进入vhost, 编辑上面创建的俩个文件, 用vim命令, 直接把编辑器写好的内容复制过去
- 创建log文件
cd /etc/nginx/
ls
mkdir logs
cd logs/
touch access.log
- 检查虚拟主机的配置是否正确
nginx -t
, 不报错就表示成功 - 重启Nginx:
nginx -s reload
- 报错
[error] invalid PID number "" in "/run/nginx.pid"
- 解决
nginx -c /etc/nginx/nginx.conf (指定一下主文件)
nginx -s reload
6. 访问
(1) 在浏览器输入 adminv2.jianliwu.com
, 发现无法访问, 因为还没有买域名解析域名, 去通过host文件配置一下, 手动把服务器ip解析到相应的域名
(2) 使用charles, 或者使用本机的host文件配置2个域名
adminv2.jianliwu.com 182.289.220.0(服务器公网IP)
s.jianliwu.com 182.289.220.0(服务器公网IP)
(3) 然后通过adminv2.jianliwu.com
, 还是无法访问, 因为云服务器默认没有开启80端口,要自己配置, 参考: 云服务无法访问的原因
(4) 配置好80端口后就可以访问了, 当你买了域名并且备案解析了, 直接把 jianliwu.com
替换成你的域名