(保姆级教程)如何部署博客到服务器上

前端：vue 全家桶
后端：koa2
数据库：mongodb
运行环境：node.js
CDN：七牛云
服务器：(腾讯云)Ubuntu 18 + nginx

购买云服务器和域名

腾讯云、阿里云等均可以购买服务器和域名，网上有不少教程，在这里就很少说了，学生通常都有优惠哦。(如下主要是腾讯云的操做步骤)

买完后，能够在站内信里查看服务器的用户名和密码，若是以为密码太复杂还能够重置。

1.配置安全组 ：

安全组至关于一个虚拟的防火墙，在安全组内能够放行系统相应的端口号以及 IP 访问的权限。

配置文档能够看这里: 建立安全组. 添加安全组规则.

PS：若是用到 mongodb，须要把安全组中的 27017 的 Mongodb 数据库端口打开

2.域名解析(须要时间生效) :
在个人域名中点击解析，而后选择添加记录

主机记录	记录类型	线路类型	记录值	MX 优先级	TTL
填写域名的前缀，例如 “www”	选择 “A”	选择 “默认” 类型	请输入您的主机 IP 地址（公网 IP）	不须要填写	默认为 600 秒

3.域名备案：根据你购买的域名提供的备案服务，一步一步提交信息就好
PS：云备案-->管局备案-->公安局备案，完成三个流程须要20天以上。

操做服务器

首先须要登陆你的服务器，语法以下：

ssh 用户名@IP地址 -p 端口号

也能够不添加-p 端口号
固然，若是不想用命令行，推荐两个图形化工具：
xshell 6能够链接远程服务器，xftp 6能够在本地和远程之间互相传输文件(也能够用来链接虚拟机)
关于安装能够看这里（免费版）会把下载连接经过邮箱发送给你

在服务器上安装mongodb数据库

如下是在Ubuntu安装mongodb4.2版本的步骤

每一个系统的安装步骤都不同，若是以前有安装过其余软件包，须要先 卸载干净，否则可能会起冲突，致使安装不成功

官方文档在这里，能够浏览一下

步骤1：导入MongoDB 的公钥

wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -

步骤2：为MongoDB建立一个list文件

路径：/etc/apt/sources.list.d/mongodb-org-4.2.list

Ubuntu 18.04 (Bionic):

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

Ubuntu 16.04 (Xenial):

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

步骤3：更新本地资源包数据

sudo apt-get update

步骤4：安装最新稳定版本MongoDB

sudo apt-get install -y mongodb-org

默认路径为：

1. MongoDB存储的data数据路径为：/var/lib/mongodb
2. MongoDB的log日志文件存放的路径：/var/log/mongodb

也能够建立/etc/mongodb.conf，修改data和log的文件路径:
sudo vim /etc/mongodb.conf(按i插入代码，按esc :wq保存退出)具体vim操做请看 这里

mongodb.conf 的内容以下：

dbpath=/var/lib/mongodb/data/db //data数据库的路径，根据你本身的路径配置
logpath=/var/lib/mongodb/log/mongodb.log  //log日志的路径，根据你本身的路径配置
logappend=true
port=27017                                //默认监听的端口号 27017
fork=true
noauth=true
bind_ip = 0.0.0.0

配置完，须要从新加载一下配置文件，直接运行 mongo 会出错。
mongod -f /etc/mongodb.conf

安装完成后：

启动 mongod服务：(通常启动在27017端口)

sudo service mongod start

经过systemctl status验证MongoDB已成功启动：
sudo systemctl status mongod

开机自启动mongod服务：

sudo systemctl enable mongod.service

如下两个命令也能够检查MongoDB是否已经启动：
netstat -anptu |grep 27017
ps -ef|mongodb
中止MongoDB:
sudo systemctl stop mongod
从新启动MongoDB：
sudo systemctl restart mongod

进入mongodb shell：

mongo

若是命令行最左面变成'>'说明成功进入，接下来就能够操做数据库了
建立用户：

use admin
db.createUser({user:"root", pwd:"root123", roles:[{role:"root", db:"admin"}]})

ps：用户名和密码可随意定,表示在admin数据库中建立一个用户，权限为root
输入exit退出MongoDB shell。

启用mongodb身份验证
mongodb默认是没有用户名和密码的，能够经过--auth来开启安全性的检查
vim /etc/mongodb.conf (添加一下配置)：

auth = true

而后须要从新启动MongoDB：
service mongod restart

本地链接远程服务器上的mongodb：
须要本地也安装了mongodb

mongo 212.64.90.170:27017
>use admin
>db.auth("root","root123")
>1

出现1说明登陆成功

后端链接服务器上的数据库：

mongodb://用户名:密码@ip:27017/数据库?authSource=admin

如：mongodb://root:root123@localhost:27017/blog?authSource=admin

若是链接失败，能够用telnet测试：
telnet ip 27017

telnet链接不成功可能的缘由有

1.服务器防火墙没有开放27017或22端口
登陆服务器，防火墙开放端口命令：

sudo ufw allow 27017

查看本地的端口开启状况：

sudo ufw status

而后防火墙须要重启：

sudo ufw reload

2.bind_ip没修改成0.0.0.0
mongodb的配置文件中默认为127.0.0.1，默认只有本机能够链接。此时，须要将bind_ip配置为0.0.0.0，表示接受任何IP的链接。
打开/etc/mongodb.conf配置文件，修改bind_ip 为 0.0.0.0，保存。
3.修改后没有重启mongod服务

ps：telnet链接成功后crtl+] 而后输入quit退出

链接成功以后就能够远程操做数据库了。

推荐两个图形化工具：
navicat for mongodb安装连接和 mongodb compass安装和使用连接

贴一个compass的链接：（经过ssh链接到服务器而后再链接服务器上的数据库）
<imgsrc="https://img-blog.csdnimg.cn/20200424171044297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTA4ODMy,size_16,color_FFFFFF,t_70"style="width: 100%;">
<imgsrc="https://img-blog.csdnimg.cn/20200424171047145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTA4ODMy,size_16,color_FFFFFF,t_70"style="width: 100%;">

配置nginx

安装在服务器上：

sudo apt-get install nginx

过程会让选一个Y赞成占用内存。
nginx -v查看是否安装成功
默认路径为：

1. 全部的配置文件都在/etc/nginx下
2. 程序文件在/usr/sbin/nginx
3. 日志放在了/var/log/nginx中
4. 并已经在/etc/init.d/下建立了启动脚本nginx

在etc/nginx/nginx.conf中添加配置：

http {
...
server {
    listen 80; //前端运行在80端口
    server_name 域名;  //指向域名，能够用域名来访问项目
    root /home/my-project/;   //你的前端项目所在位置
    index index.html;
    location /api {
      proxy_pass http://ip:port;  //跨域，表示前端全部/api/xxx的请求都将发送给后端服务运行地址，本例中ip为localhost，port为后端启动所在的端口
    }
    try_files $uri $uri/ @router;
    location @router{
      rewrite ^.*$ /index.html last;
    }
    gzip on;       //开启gzip压缩文件来提升页面加载速度
    gzip_buffers 32 4k;
    gzip_comp_level 6;
    gzip_min_length 200;
    gzip_types text/css text/xml application/javascript;
    gzip_vary on;
}
...
}

其中，下面这段代码的做用：
vue-router的mode为history时，设置的路径不是真实存在的路径。进入到内页后，再刷新浏览器，发现会404。因此为了刷新后还能够找到对应的路径，避免404。

try_files $uri $uri/ @router;
location @router{
  rewrite ^.*$ /index.html last;
}

若是前端有多个项目能够配置多个server，具体能够看这篇

开启nginx:

service nginx start

注意：改变nginx.conf后必定要重启nginx:

sudo nginx -s reload

用ps -ef列出进程列表，而后经过grep过滤
ps -ef | grep nginx 就能够看到Nginx进程是否存在了
关闭nginx: nginx -s stop

前端打包部署

本地项目npm run build 后 把dist中的文件发送到服务器/home/my-project下。
注意：不要外面的dist文件夹

ps：传输失败的缘由多是普通用户对这个文件夹权限不够，xshell链接服务器，修改权限：
chmod 755 文件夹目录

后端部署

安装node和npm
把后端整个项目除node_modules外都传输到服务器/home下，cd进入项目所在路径
npm install 安装全部须要的依赖
npm start 试一下能不能运行成功
退出服务器后node进程就自动关了，项目也就自动关闭了因此咱们须要 pm2 来守护进程。

全局安装pm2:

npm install -g pm2

安装完成后切换到你项目所在路径

pm2 start ./bin/www --watch

--watch参数，意味着当你的koa2应用代码发生变化时，pm2会帮你重启服务。
中止指令：

pm2 stop ./bin/www

监视每一个node进程的CPU和内存的使用状况：

pm2 monit

还能够经过下面这种方式杀死进程：

netstat -tpln  
kill xxx

结束对应的进程，kill后面写的是进程号PID.

至此，我的博客搭建完成，浏览器中输入你的域名就能够看到你的博客了。

打个小广告个人博客 Woc12138（持续更新中）
先后端代码 Github

写这篇文主要目的是记录和分享，为了本身之后再回顾，也为了让跟我同样的小白们少踩一些坑~

若有错误，欢迎指正。