项目和构建发布

前端项目构建

前端代码为什么要打包

• 浏览器只能识别 html、css、js 代码，浏览器没办法识别 vue 文件
• 没法识别 ES6 import export 代码，也没法识别 CommonJS 中的 require module.export

修改 vue.config.js 的 publicPath 的 / 为 .

module.exports = {
  publicPath: '.'
}

之后打包项目将 dist 文件夹拷贝到 Nginx 目录下

远程时需要把 upload.conf 中 autoindex on; 注释掉，要不然目录结构就暴露出去了

自动化部署

后端自动化部署脚本

echo '开始更新服务端'
cd /root/admin/admin-immoc-node
echo '正在更新代码...'
git pull
echo '正在重启服务...'
kill -9 `ps -ef|grep node|grep app.js|awk '{print $2}'`
node app.js & # &:在后台启动
echo '服务端启动成功'

前端自动化部署脚本

echo '开始更新前端'
cd /root/admin/admin-immoc-vue
echo '正在更新代码...'
git pull
echo '前端开始构建...'
npm i
npm run build:prod
echo '前端开始发布...'
rm -rf ~/upload/admin
mv dist ~/upload/admin
echo '前端启动成功'

预备知识

阿里云 ECS 服务器

注意：CentOS6 坑太多了，最好使用 CentOS7 以上版本（如果安装 CentOS6 可以停用过更换操作系统）

# 查看Linux系统版本
lsb_release -a

创建 ECS 服务器实例

• 在 更多——密码/密钥——重置实例密码 中修改密码后进行重启

• 在 更多——网络和安全组——安全组配置 中查看 内网入方向全部规则 查看对应开放端口

使用 shell 工具连接即可

如果使用 ssh 命令直接连接，想要免密登录：

ssh-keygen -t rsa
ssh-copy-id -i ~/.ssh/id_rsa.pub root@xxx
# 输入密码后会出现 Number of key(s) added

# 也可以修改hosts文件，直接登录
vim /etc/hosts
  xxx immoc # 添加这个内容
ssh root@immoc

连接后，一段时间不操作，发现自动断开连接，这样就可以避免自动断开连接：

vim /etc/ssh/sshd_config
   # 修改超时时间间隔和次数，之后 :wq 保存退出
  ClientAliveInterval 600
  ClientAliveCountMax 3
service sshd restart

Node

nvm GitHub

安装 nvm，会下载到 /root/.nvm

# 安装
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

# 设置nvm自动运行
echo "source ~/.nvm/nvm.sh" >> ~/.bashrc
source ~/.bashrc

安装 node

• 尽量安装 v12 版本以下的 node，不然可能会出错

nvm install node
# 查看全部的安装版本号
nvm ls-remote

# 安装指定版本node，这里我安装的这两个版本
nvm install v8.17.0
nvm install v11.15.0
nvm use v11.15.0

Nginx

安装依赖命令：

yum -y install pcre*
yum -y install openssl*

CentOS6 可能会报如下错误：

报错：Loading mirror speeds from cached hostfile http://mirrors.cloud.aliyuncs.com/centos/6/os/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 404 Not Found" 尝试其他镜像。

• 报错解答 centos6 404

cd /etc/yum.repos.d
vim CentOS-Base.repo
# 将文件中$releasever全部改成7
:%s/$releasever/7/g
yum clean all && yum makecache

报错：http://mirrors.cloud.aliyuncs.com/epel/6/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 404 Not Found"

• 报错解答 epel 404

cd /etc/yum.repos.d
vim epel.repo
# 把enabled=1改为enabled=0
yum clean all && yum makecache

当然也可以直接这样做，在网上找一个源替换一下（主要原因是 2020年12月2号之后 CentOS6更新包下架了）

• 综合最佳方案解答 yum

wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo

wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo

解决报错之后再执行安装依赖命令即可，之后下载 nginx：

tar 命令

• -z 有 gzip 属性的
• -x 解压
• -v 显示所有过程
• -f 使用档案名字，这个参数是最后一个参数，后面只能接档案名

cd ~
mkdir nginx
cd nginx
wget http://nginx.org/download/nginx-1.12.2.tar.gz
tar -zxvf nginx-1.12.2.tar.gz

输出 make 和 gcc，检查这两个是否已经安装：

# 如果gcc没有安装
yum -y install gcc gcc-c++
# 如果make没有安装
yum -y install autoconf automake make

执行配置

# 使用sh或./执行文件
./configure

# 对源码进行编译
make -j4
# 安装
make install
# 检查nginx是否安装成功，是否能读取到配置文件
/usr/local/nginx/sbin/nginx -t
# 创建软链接
ln -s /usr/local/nginx/sbin/nginx nginx

启动 nginx

# 启动nginx
nginx
# 查看nginx进程
ps -ef|grep nginx

更改 nginx 配置

cd /usr/local/nginx/conf/
vim nginx.conf

# 再把80端口改为9000
user root;
include /root/nginx/*.conf; # 在最后一个大括号上面

# 重启nginx服务
nginx -s reload

修改 /root/nginx/nginx.conf 为如下内容，创建 upload 目录

• 生产环境不建议把 autoindex on; 开启

server {
  listen 80;
  server_name localhost;
  root /root/nginx/upload;
  autoindex on;
  add_header Cache-Control "no-cache, must-revalidate";
  location / {
    add_header Access-Control-Allow-Origin *;
  }
}

Git

安装 Git

yum install -y git

# 卸载git
yum remove -y git

通过 yum 安装 git，版本是比较老的。可以先安装其依赖

mkdir imooc-ebook
cd imooc-ebook

# 安装依赖
yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel
yum install -y gcc perl-ExtUtils-MakeMaker
yum install -y tcl build-essential tk gettext

安装完依赖就可以通过 wget 去安装最新的 Git

wget https://github.com/git/git/archive/v2.9.2.tar.gz
tar -zxvf v2.9.2.tar.gz
cd git-2.9.2
# 编译
make prefix=/usr/local/git all
# 安装
make prefix=/usr/local/git install

这时是无法直接使用 Git 的，需要创建一个软链接

cd /usr/bin
ln -s /usr/local/git/bin/git git

免密登录

ssh-keygen -t rsa -C '775343238@qq.com'
# 将秘钥放到SSH keys中
cat ~/.ssh/id_rsa.pub

git clone git@github.com:llwodexue/vue-node-mooc.git

MySQL

安装

yum install -y mysql-server

CentOS 7 会报：没有可用软件包 mysql-server

# 下载mysql的repo源
wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm
# 安装nrm包，之后就有mysql repo源了
rpm -ivh mysql-community-release-el7-5.noarch.rpm
# 安装即可
yum install -y mysql-server

启动 mysql

# 检查mysql状态
service mysqld
service mysqld start

CentOS 7 会报：The service command supports only basic LSB actions (start, stop, restart, try-restart, reload, force-reload, status). For other actions, please try to use systemctl

# 启动mysql服务
systemctl start mysqld
# 检查mysql状态
systemctl status mysqld

我这个版本 mysql 没有初始密码，如果有初始密码，可以通过如下命令去查看

cat /var/log/mysqld.log |grep password

登录

mysql -u root -p

# mysql8.0版本更新密码
alter user 'root'@'localhost' identified by 'root';

# mysql5.6版本更新密码
UPDATE user SET Password = PASSWORD('root') WHERE user = 'root';
FLUSH PRIVILEGES;

在阿里云安全组中添加 mysql 的端口号

添加完之后也是连接不上的，需要让它对特定 ip 具有远程连接能力才行

use mysql;
# mysql8.0
create user 'root'@'%' identified with mysql_native_password by 'root';
grant all privileges on *.* to 'root'@'%';
flush privileges;

# mysql5.6
GRANT ALL PRIVILEGES ON *.* TO root@'%' IDENTIFIED BY 'root';
FLUSH PRIVILEGES;

修改后端代码，把 env 改为 prod

• 记得给 8089 端口添加到安全组

let UPLOAD_PATH, UPLOAD_URL, OLD_UPLOAD_URL
let dbHost, dbUser, dbPwd

if (env === 'dev') {
  UPLOAD_PATH = 'E:/upload/admin-upload-ebook'
  UPLOAD_URL = 'http://127.0.0.1:8089/admin-upload-ebook'
  OLD_UPLOAD_URL = 'http://127.0.0.1:8089/book/res/img'
  dbHost = 'localhost'
  dbUser = 'root'
  dbPwd = 'root'
  dbPort = 3008
} else {
  UPLOAD_PATH = '/root/nginx/upload/admin-upload-ebook'
  UPLOAD_URL = 'http://47.95.217.159:8089/admin-upload-ebook'
  OLD_UPLOAD_URL = 'http://47.95.217.159:8089/book/res/img'
  dbHost = '47.95.217.159'
  dbUser = 'root'
  dbPwd = 'root'
  dbPort = 3006
}

域名这里就不弄了，备案后解析一下即可，最终部署效果图如下：