【博客发布】Ubuntu+Vue+Node+Express+Mysql+Nginx搭建博客上线踩坑现场

心心念念的手敲博客网站终于开发完毕，剩下的就是项目上线了，虽说之前做项目的时候多多少少接触过一点项目的线上发布，也接触过 Linux 环境,但是实打实的从零开始上线项目，实属第一次，好在最终也是发布成功，在此特别记录一下，该次发布项目，菜鸡所踩的那些坑。

1.上线前期准备

段落引用在上线前，我们需要对上线到服务器所需的东西做一个整理，因为博主采用的前端是 Vue ，后台是 node.js ，数据库采用的 Mysql ，所以经过整理后，前期需要做的准备如下:

1.云服务器一台，自己用硬件搭服务器成本太高，还不稳定，最难解决的是没有公网IP和内网穿透，所以放弃
2.已经备案完毕的域名一个
3.Linux系统，这里采用的是阿里云自带的Ubuntu16.0
4.安装node.js环境和npm包管理器
5.安装Mysql数据库
6.安装Nginx
复制代码

2.服务器基本配置

博主在这里采用的是阿里云的学生机，不是给阿里云打广告，确实还挺划算的，学生优惠一个月不到十块钱，开个花呗分期买一年分12个月还款，约等于白拿，不过买了没好久博主就后悔了，因为双十一的时候更便宜，购买成功之后会预装好系统，所以省掉了装系统这一步，要是想学习Linux系统的安装，可以下一个 Vmware 随便折腾，而且云服务器还有一个好处就是就算折腾崩掉了，直接在控制台恢复硬盘即可，又恢复到了最初的样子从头折腾，博主在上线期间就恢复了好几次。服务器购买之后就不代表就可以直接使用了，我们还需要对其进行一些简单的配置。

2.1.开放服务器端口

众所周知，很多服务都会占用对应的网络端口，比如mysql默认占用3306端口，而在我们的服务器上也是如此，如果没有开放这些端口的访问，就会造成服务无法正常运行或者无法远程访问的情况，下面一一记录需要开放的端口。

首先在购买服务器时，默认开启 3389、-1/-1、22/22 端口， 22 端口主要用于远程登录服务器进行操作，必须要开启。然后登录阿里云控制台，选择所购买的服务器，进入到安全组中进行其他端口的配置，注意是配置入方向的端口，主要需要打开的端口如下:

1.3000端口:node.js服务监听端口
2.3306端口:Mysql服务监听端口
3.80端口:Nginx服务默认监听端口
下面附上端口配置图(以3000端口为例):
其中，授权对象0.0.0.0/0的意思是放行一切对象对此端口的访问
2.2.修改ubuntu16.0下载源
因为ubuntu默认的软件下载源在美国，所以下载会非常的慢，一般会采用更改下载源的方法解决这个问题，虽然阿里云的服务器的默认下载源是阿里源，但是有时候也会出现下载失败找不到包的问题，所以博主把下载源修改到了清华大学源。修改下载源非常简单，修改/etc/apt/source.list文件就可以了。
1.进入/etc/apt文件夹
cd /etc/apt
复制代码
2.在vim下修改source.list文件
sudo vim sources.list
复制代码
3.注释掉sources.list里面的其他内容
4.添加新的下载源

1.先按`i`进入编辑模式
2.粘贴清华大学源到文件中:
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial main restricted
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates main restricted
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial universe
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates universe
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-backports main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security main restricted
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security universe deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security multiverse
3.按`Esc`退出编辑模式
4.输入`:wq`保存退出
复制代码
5.更新apt
sudo apt-get update
复制代码
2.3.安装node.js环境
1.安装node.js环境
sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
复制代码
2.为npm包管理器更换淘宝镜像
sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list
复制代码
3.全局安装n管理器(用于管理node.js版本)
sudo npm install n -g
复制代码
4.安装最新的node.js版本
sudo n stable
sudo node -v
复制代码
2.4.安装Mysql
1.首先执行以下命令:
sudo apt-get install mysql-server(会出现界面让你输入root的密码)
sudo apt install mysql-cilent
sudo apt install libmysqlcilent-dev
复制代码
2.测试是否安装成功
sudo netstat-tap | grep mysql
复制代码
出现以下界面，即为安装成功
3.访问Mysql服务

mysql -uroot -ppassword
复制代码
4.设置mysql远程访问
cd /etc/mysql/mysql.conf.d
sudo vim mysqld.cnf
注释掉bind-address=127.0.0.1一行即可
5.保存退出，用3进入mysql访问执行授权命令
grant all on *.* to root@'%' identified by 'password' with grant option
flush privileges
复制代码
6.用exit退出mysql服务，重启mysql服务
service mysql restart
复制代码
7.然后可以通过可视化软件连接云服务器的Mysql了
2.5.安装nginx
在这里博主采用的是简单的安装办法，没有采用源码安装的办法，图一个方便
1.运行安装命令
sudo apt-get install nginx
Ubuntn安装之后，nginx的文件结构大致如下所示:
配置文件:/usr/sbin/nginx
日志文件:/var/log/nginx
默认启动脚本:/etc/init.d/nginx.conf
默认虚拟主机:/var/www/nginx-defalut
2.启动默认nginx
sudo /etc/init.d/nginx start
复制代码
然后访问localhost或者服务器ip，出现nginx欢迎页即为安装成功
2.6.安装pm2
pm2是基于node开发的一个进程管理器，适用于后台常驻脚本管理
npm install pm2 -g
复制代码
2.7.安装rz/sz
安装用以上传本地文件到服务器
sudo apt-get install lrzsz
复制代码
2.8.安装unzip
安装zip解压软件
sudo apt-get install unzip
复制代码
至此，我们的服务器基本配置就算搞定了，然后就是项目的正式上线了
3.前端项目打包上传
1.新建前端项目目录
mkdir /data/my_blog/front-end
复制代码
2.打包本地vue项目
进入本地vue项目根目录，执行:
npm run build
然后将进入dist文件夹，压缩全部内容为zip格式
复制代码
3.进入服务器的前端项目目录，上传项目
cd /data/my_blog/front-end
选择刚刚的压缩包，上传完毕后执行解压
unzip dist.zip
此时可以使用ll命令查看当前目录的文件
复制代码
4.本地数据库的迁移
该项的主要目的是在服务器上创建一个与本地完全一样的数据库
1.首先进入Navicat软件，选中本地博客数据库，导出格式为sql文件
2.用该软件连接远程数据库，创建一个同名数据库create database blog
3.选中创建的数据库，执行刚刚创建的sql文件，OK，搞定
5.后端项目的打包上传
1.进入本地后端项目根目录，打包除了依赖文件夹以外的文件，压缩为zip格式
2.创建服务器上的后端项目目录
mkdir /data/my_blog/back-end
复制代码
3.进入该目录，上传并解压项目
cd /data/my_blog/back-end
选择压缩文件
unzip name.zip
复制代码
4.安装项目的依赖
npm install
复制代码
5.使用pm2运行node项目
pm2 start bin/www
在这里一定要使用这种正确的方式，不要使用pm2 start app.js，不然无法监听到3000端口，不要问我为什么，我找这个bug找了半个小时，运行成功后会显示`pm2`当前运行的服务情况
6.解决后来测试出来的一个坑
node.js的mysql插件，默认连接时间time_out是八个小时，如果超过八个小时没有和数据库进行交互，那么node会自动断开这个连接，然后报错PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR，博主找这个问题找了半天，最开始是用的原始办法，将time_out的值改为了30天，windows上最多改为24天，后来找到了以下解决办法，贴出来代码如下：
/*数据库配置文件*/ 
const mysql = require('mysql');
const mysqlConf = {
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'name',
    multipleStatements: true
// 用于保存数据库连接实例
let dataBase = null;
// 设置计时器
let pingInterval;
// 如果数据连接出错 重新连接
function handleError(err){
    logger.info(err.stack || err);
    connect();
// 建立数据库的连接
function connect() {
    if(dataBase !== null){
        dataBase.destroy();
        dataBase = null;
    dataBase = mysql.createConnection(mysqlConf);
    dataBase.connect((err) => {
        if (err) {
            logger.info("err conncetion to database",err);
            setTimeout(connect, 1500);
    dataBase.on("error",handleError);
    //每小时ping一次数据库 保持数据库连接状态
    clearInterval(pingInterval);
    pingInterval = setInterval(() => {
        console.log('ping database');
        dataBase.ping((err) => {
            if(err){
                console.log('ping err' + JSON.stringify(err));
    }, 3600000);
// 调用连接函数
connect();
module.exports = dataBase;
复制代码
6.nginx配置
1.修改nginx配置文件
cd /etc/nginx
vim nginx.conf
复制代码
2.修改配置文件为：(这里贴出博主的配置文件，仅供参考)
在http中添加server
#server 配置
        server {
                listen          80 default_server;
                listen          [::]:80 default_server;
                server_name     blog.bestbven.top;
                root            /usr/share/nginx/html;
                # Load configuration files for the default server block.
                include /etc/nginx/default.d/*.conf;
                location / {
                        root /data/my_blog/front-end; #前端项目地址
                        index index.html; #默认寻找
                        try_files $uri $uri/ /index.html; #一个坑，后面讲
                location /api/{
                        proxy_pass  http://116.62.163.180:3000/; #监听代理
复制代码
3.保存对应的文件，重读nginx配置
nginx -s reload
nginx -c /etc/nginx/nginx.conf
这个时候，可能会出现80被端口占用的情况，解决办法如下:
报错：nginx: [emerg] a duplicate default server for 0.0.0.0:80
这个时候删掉/etc/nginx/sites-available/default文件，重新启动服务即可
倘若只报错80端口被占用，那么:
netstat -tunlp
查看全部端口占用情况
找到占用80端口的进程，记住他的进程号，然后
kill -9 进程号
干掉他，再重启nginx即可
复制代码
4.nginx的proxy_pass详解
现，有题设要访问http://192.168.1.1/api/getTest
First：
location /api/ {
    proxy_pass http://127.0.0.1/;
URL：http://127.0.0.1/getTest
复制代码
Second：
location /api/ {
    proxy_pass http://127.0.0.1;
URL：http://127.0.0.1/api/getTest
复制代码
Third：
location /api/ {
    proxy_pass http://127.0.0.1/test/;
URL：http://127.0.0.1/test/getTest
复制代码
Fourth：
location /api/ {
    proxy_pass http://127.0.0.1/test;
URL：http://127.0.0.1/testgetTest
复制代码
博主当时3000端口总是无法代理，被卡住了半天，最后google出了是proxy_pass配置出问题了
5.nginx代理的vue项目刷新后报错404
vue单页面的启动页面是index.html文件，路由实际是不存在的，所以会出现页面刷新404问题，需要设置一下访问vue页面映射到index.html上。
1.打包静态资源设置绝对路径
config/index.js
2.nginx映射配置

见上面nginx配置说的坑的地方
复制代码
7.域名解析
其实到这个地方，我们的博客网站已经是可以访问了，不过我们采用的是服务器的IP地址进行访问，所以我们还差最后一步，就大功告成了
1.进入阿里云域名控制台
2.选择已经备案完毕的域名，进行解析
3.添加记录
4.记录类型选择A，因为我们的域名要解析到一个IPV4地址
5.主机记录博主输入的`blog`，即将一级域名`bestbven.top`解析为了二级域名`blog.bestbven.top`指向服务器IPV4地址
6.记录值填写服务器IPV4地址
7.点击保存
复制代码
OK，所有的发布上线打工告成，可以正常访问了，博主花了整整八个小时时间，才从坑里面勉强爬上岸，前路漫漫啊

1.上线前期准备

2.服务器基本配置

2.1.开放服务器端口

2.2.修改ubuntu16.0下载源

2.3.安装`node.js`环境

2.4.安装`Mysql`

2.5.安装`nginx`

2.6.安装pm2

2.7.安装`rz/sz`

2.8.安装`unzip`

3.前端项目打包上传

4.本地数据库的迁移

5.后端项目的打包上传

6.`nginx`配置

7.域名解析