Part10-SSR渲染与线上部署

一、Koa2+MySQL项目线上部署

1、上传与安装依赖

a、上传项目并安装项目依赖

先将你的项目（除了 node_modules）放到服务器指定的位置，例如我存放的位置：

# 我的项目名称就叫cms-server
/usr/local/html/cms-server

然后通过ssh连接服务器，进入该目录，执行 npm i 安装依赖包。

这里很有可能会安装失败，原因是被package-lock.json影响。解决方案：

$ rm package-lock.json
# 方法一：
# 如果没安装过yarn就全局安装一下
$ npm i yarn -g
$ yarn

# 方法二：
# 如果不愿意使用yarn，也可以用cnpm淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm i

安装完依赖包之后，安装压缩与解压工具：

# ubuntu新系统已自带解压与压缩工具，这一步可不做
$ sudo apt-get install unzip zip

b、ubuntu卸载MySQL

首先在终端中查看MySQL的依赖项：

$ dpkg --list|grep mysql

卸载：

$ sudo apt-get remove mysql-common
$ sudo apt-get autoremove --purge mysql-server-5.7

清除残留数据：

$ dpkg -l|grep ^rc|awk '{print$2}'|sudo xargs dpkg -P

再次查看MySQL的剩余依赖项：

$ dpkg --list|grep mysql

继续删除剩余依赖项：

$ sudo apt-get autoremove --purge mysql-apt-config

至此已经没有了MySQL的依赖项，彻底删除！

c、ubuntu安装与配置MySQL

* Ubuntu换源

备份原来的sorce文件：

$ cd /etc/apt
$ sudo cp sources.list sources.list.old

清空并编辑sources.list内容：

$ echo "" > sources.list
$ vim sources.list

写入一个这里选择清华镜像源：

# 清华镜像源
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial main restricted universe multiverse

* 更新镜像源与软件

# 更新镜像源
sudo apt-get update
# 更新软件
sudo apt-get upgrade

d、ubuntu安装mysql

# 安装mysql5.7服务端，安装时会提示输入密码，暂时设置为123456
$ sudo apt-get install mysql-server-5.7

出现下图选Y：

# 继续安装mysql5.7客户端
$ sudo apt-get install mysql-client-5.7

接下来查看mysql版本：

# 查看mysql版本
$ mysql -V
# 查看mysql服务
$ netstat -tap | grep mysql

会看到下图代表完全安装成功：

e、忘记密码方案【备用】

# 停止mysql服务
$ sudo service mysql stop

# 修改MySQL的登录设置，暂时不校验登陆密码
$ sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

# 将[mysqld]下的“skip-external-locking”注释掉
# 添加 “skip-grant-tables” 然后保存退出
例如：
================================================
[mysqld]
user        = mysql
pid-file    = /var/run/mysqld/mysqld.pid
socket      = /var/run/mysqld/mysqld.sock
port        = 3306
basedir     = /usr
datadir     = /var/lib/mysql
tmpdir      = /tmp
lc-messages-dir = /usr/share/mysql
#skip-external-locking
skip-grant-tables
=================================================

# 重启mysql数据库
$ sudo service mysql restart

# 免密登陆mysql数据库
$ mysql -u root mysql

# 修改root密码
$ update mysql.user set authentication_string=password('123456') where user='root';

# 刷新生效
flush privileges;

# 还原MySQL的登录设置
# 将[mysqld]下添加的“skip-grant-tables” 删除
# 将“skip-external-locking”的注释放开然后保存退出
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
例如：
================================================
[mysqld]
user        = mysql
pid-file    = /var/run/mysqld/mysqld.pid
socket      = /var/run/mysqld/mysqld.sock
port        = 3306
basedir     = /usr
datadir     = /var/lib/mysql
tmpdir      = /tmp
lc-messages-dir = /usr/share/mysql
skip-external-locking
=================================================

# 重启mysql数据库
sudo service mysql restart

# 使用新密码登陆mysql
mysql -u用户名 -p密码
# 例如： 
mysql -uroot -p123456

f、mysql启动停止命令【备用】

查看mysql运行状态：sudo service mysql status
运行mysql：			 sudo service mysql start
结束mysql：			 sudo service mysql stop
取消开机启动：			sudo update-rc.d -f mysql remove

2、pm2部署

先解释一下什么是pm2：

简单点说就是让你不需要像执行 node app.js 一样，必须一直保持终端开启，而是可以在你退出命令行界面时，依然将你的项目运行着。

a、pm2安装

# 全局安装pm2
$ npm install pm2 -g
# 查看pm2列表
$ pm2 ls
# 运行项目
$ cd /usr/local/html/cms-server
$ pm2 start app.js --name cms-server --watch
# 保存pm2列表
$ pm2 save
# 设置pm2开机自启动
$ pm2 startup					# 禁止的话是pm2 unstartup

pm2运行出来的列表如图：

停止或开启该服务可以：

b、配置安全组

例如你项目名为cms-server，端口为6688，那么就需要到实例的安全组中：

c、访问IP+端口

例如：我的IP为8.130.20.212，端口号为6688，那么我的访问方式应为：8.130.20.212:6688，这也是我整个后端项目的根路径。

3、MySQL线上配置

a、连接本地数据库

目前我们只能访问根路径，因为其他路径基本都需要请求并访问数据库读取数据。因此我们需要把电脑本机的数据库搬运到服务器上。打开navicat，连接本地数据库：

b、连接远程数据库

我们采用ssh连接：

c、创建远程数据库

右键并新建数据库：

新建后就会出现：

d、数据传输

点击顶部工具栏，工具 - 数据传输：

点击 下一步：

选择 开始，传输完成后就会看到：

这时候点击 关闭，再打开远程数据库的表，就会发现所有数据已经迁移：

此时，我们完成了将本机数据库迁移至服务器的数据库，大功告成！

此时假设你的后端路由：8.130.20.212:6688/web/home/banner 可以返回首页banner数据，那么你将立刻看到：

那么，至此，服务端部署全部完成！

4、持续化部署【扩展】

然而，如果项目需要频繁修改，并且实时查看线上环境，那可能就需要频繁打包并上传，这一点非常麻烦。有没有什么更好的解决方案？答案是有的：

二、 Nuxt项目线上部署

1、本地运行项目

a、先给 package.json 中添加：

"config": {
  "nuxt": {
    "host": "localhost",
    "port": "8765"
  }
}

b、命令行执行

$ npm run dev

2、项目打包

所有图片的引入改为require的形式。

a、nuxt.config.js 中：

server: {
 port: 8765, // default: 3000
 host: '私网IP', // default: localhost (推荐)
},
    
    
router: {
  // base: "/"
},

b、package.json 中：

{
  "script": {
    "serve": "pm2 start npm --name cms-web -- run start"
  }
}

c、命令行执行客户端打包：

$ npm run build

d、上传项目到服务器

把除了以下文件(夹)的所有内容都放到服务器任意指定的目录：

.git / dist / .gitignore / package-lock.json / yarn.lock

e、安装依赖并打包

服务器进入该目录，再次安装依赖并打包

$ npm install
$ npm run build

如果安装过程中总是自动出现 package-lock.json，可以先做这一步设置：

$ npm config set package-lock false

f、pm2运行项目

首先确定pm2已经安装，未安装请参考nginx教程。

# 项目目录中：
$ npm run serve

3、Nginx配置

a、修改配置

vim你的 nginx.conf：

http {
    upstream nuxt {
        server localhost:8765;	# 项目中nuxt.config.js怎么写，这里就怎么写
        keepalive 64;
    } 

    server {
        listen 80;
        server_name codesohigh.com;
        location /cms-web {
            proxy_pass http://nuxt;
        }
    }
}

b、配置安全组

c、访问

浏览器访问 http://codesohigh.com/cms-web 即可。