总是对折腾博客有一种执念，以前wordpress、hexo都部署过，自己用node的express框架也写过部署过。其实后来觉得博客只是一个记录工具而已，自己折腾也只是为了熟悉自己掌握的技能，以及想要有一个能够长期迭代的个人项目。博客也是需要的，所以自己还是又折腾了一个自己的博客。一是升级一下vue和react的版本以及尝试一下thinkjs，二是准备以后的个人项目的后台利用目前的博客的后台实现，也算不浪费工作量。
博客地址：https://blog.fishliu.com
代码库：
# 后台由thinkjs提供restapi接口，mongodb存储数据，token实现登陆认证
https://github.com/mooccat/thinkblog
# 前端由vue2+vue-router+vuex实现，目前未加入多用户和评论功能，后期看需求添加
https://github.com/mooccat/vue-blog
# 前端管理侧由react+react-router v4+mobox实现
https://github.com/mooccat/react-blog-admin
前期准备：
- thinkblog下view目录下的index.html和admin.html分别是vue-blog和react-blog-admin执行npm run build生成的html，www目录下的static文件夹也是执行npm run build后生成的static文件夹。（thinkblog代码库里已经执行这一步）。
在vultr上部署博客
vultr简介
vultr是一家国外的国际知名大牌vps商家，最近还支持支付宝付款，有免费快照功能，性价比我觉得也比较高，采用ssd，我长期使用来看无论是搭建网站还是科学上网都比较稳定，如果有需要建议选择日本机房或是洛杉矶机房。
附上注册链接,目前通过这个链接充值$10送$10：vultr
我的vultr安装的是centos 7，所以以centos 7为例，其他系统大同小异。利用xshell连上我们的vps，然后开始部署
1、安装mongodb
[官方安装指导]（https://docs.mongodb.com/manual/administration/install-on-linux/）
vi /etc/yum.repos.d/mongodb-org-3.6.repo
粘贴一下内容
[mongodb-org-3.6]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/amazon/2013.03/mongodb-org/3.6/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.6.asc
执行安装
sudo yum install -y mongodb-org
# 启动服务
sudo service mongod start
# 加入开机启动
sudo chkconfig mongod on
2、安装git用于拉取代码。
# 安装git
yum install git
3、利用nvm安装node环境
# 获取nvm代码
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
source ~/.bashrc
# 利用nvm 安装 nodejs，由于用了"bcrypt": "^1.0.3"加密密码，我们安装v8.3.0版本
nvm install v8.3.0
# 设置为默认版本
nvm alias default v8.3.0
4、利用pm2运行thinkblog。
PM2 是一款专业管理 Node.js 服务的模块，建议在线上使用。使用 PM2 需要以全局的方式安装，如：
# 全局安装pm2
sudo npm install -g pm2
# 拉取代码
git clone https://github.com/mooccat/thinkblog
cd thinkblog
# 修改config/config.js里面token.secret的值
# 执行npm install安装依赖
# 执行npm run complie转译代码
修改根目录下的pm2.json
# 将 name 字段改为项目名，cwd 字段改为线上项目的具体路径。
{
"apps": [{
"name": "demo",
"script": "production.js",
"cwd": "/Users/welefen/Develop/git/thinkjs/demo",
"max_memory_restart": "1G",
"autorestart": true,
"node_args": [],
"args": [],
"env": {}
}]
}
项目启动
pm2 start pm2.json
- 安装nginx。
虽然 Node.js 自身可以直接创建 HTTP(S) 服务，但生产环境不建议直接把 Node 服务可以对外直接访问，而是在前面用 WebServer（如：nginx） 来挡一层，这样有多个好处：
- 可以更好做负载均衡，比如：同一个项目，启动多个端口的服务，用 nginx 做负载
- 静态资源使用 nginx 直接提供服务性能更高
- HTTPS 服务用 nginx 提供性能更高
# 为了方便，我这里使用了yum安装nginx
yum install nginx
# 启动Nginx
service nginx start
# 或者
systemctl start nginx.service
# Nginx的命令以及配置文件位置：
service nginx start # 启动Nginx服务
service nginx stop # 停止Nginx服务
service nginx.conf # Nginx配置文件位置
# 如果访问不了，检查一下linux防火墙
iptables -I INPUT 5 -i eth0 -p tcp --dport 80 -m state --state NEW,ESTABLISHED -j ACCEPT
# 由于后面要开启https，我们把443也加进去
iptables -I INPUT 5 -i eth0 -p tcp --dport 443 -m state --state NEW,ESTABLISHED -j ACCEPT
service iptables save
service iptables restart
修改一下项目目录下的nginx.conf
# 项目中需要将 server_name、root、port 字段值根据实际情况配置，然后将配置文件软链到 nginx 的配置文件目录下(如果使用yum安装的nginx，把配置文件拷贝到/etc/nginx/conf.d/下即可)，最后重启 nginx 服务即可（可以通过 nginx -s reload 重新加载配置文件）。
server {
listen 80;
server_name example.com www.example.com;
root /Users/welefen/Downloads/demo/www;
set $node_port 8360;
index index.js index.html index.htm;
if ( -f $request_filename/index.html ){
rewrite (.*) $1/index.html break;
}
if ( !-f $request_filename ){
rewrite (.*) /index.js;
}
location = /index.js {
proxy_http_version 1.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$node_port$request_uri;
proxy_redirect off;
}
location ~ /static/ {
etag on;
expires max;
}
}
6、现在去把域名解析到vps的ip上就可以成功访问了，接下来为我们的博客加上https。
Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用。
照着官方文档执行即可
网友评论