记录react项目的上线和发布

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) 执行脚本

1. 进入/developer/目录, 执行:./mmall-deploy.sh mmall
2. 错误: Permission denied(权限不够)
3. 查看执行权限:ls -al
4. 打印: -rw-r--r-- 1 root root 862 Apr 6 14:52 mmall-deploy.sh (可读可写但是不能执行)
5. 修改权限: chmod 775 mmall-deploy.sh
6. 再次查看权限,打印: -rwxrwxr-x 1 root root 862 Apr 6 14:52 mmall-deploy.sh (变成可执行的)
7. 执行: ./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

1. 创建这2个文件:(touch创建文件不用进入, vim会自动进入)
2. 然后去编辑器去写这2个文件(方便些), 完成后
3. 进入vhost, 编辑上面创建的俩个文件, 用vim命令, 直接把编辑器写好的内容复制过去
4. 创建log文件

cd /etc/nginx/
ls
mkdir logs
cd logs/
touch access.log

5. 检查虚拟主机的配置是否正确 nginx -t , 不报错就表示成功
6. 重启Nginx: nginx -s reload
7. 报错 [error] invalid PID number "" in "/run/nginx.pid"
8. 解决

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替换成你的域名