1. 流程
开发好前端与后端程序。
购买服务器与域名
服务器上安装所需环境（本项目是 node 和 mongodb ）
服务器上开放端口与设置规则
用 nginx、apache 或者tomcat 来提供HTTP服务或者设置代理
上传项目代码 或者 用码云或者 gihub 来拉取你的代码到服务器上
启动 express 服务器
优化页面加载
2. 内容细节
2.1 开发好前端与后端程序
开发好前端与后端程序，这个没什么好说的，就是开发！开发！开发！再开发！
2.2 购买服务器与域名
本人一直觉得程序员应该有一个自己的个人网站，拥有自己的域名与服务器。学知识或者测试项目的时候可以用来测试。
可以使用腾讯云服务器https://cloud.tencent.com/product/cvm ，相对来讲比较便宜。
可以ping一下腾讯云哪个节点比较好：https://ping.gaomeluo.com/tengxun/
服务器预装环境可以选择 CentOS 或者 windows server，，为了体验和学习 linux 系统，我选择了CentOS。
3. 服务器上安装所需环境（本项目是 node 和 mongodb ）
3.1 登录服务器
因本人用的是 MacBook Pro ，所以直接打开 mac 终端，通过下面的命令行连接到服务器。root 是腾讯云服务器默认的账号名，连接时候会叫你输入密码，输入你购买时设置的或者后来设置的密码。
ssh root@47.106.20.666 //你的服务器公网 ip，比如 47.106.20.666
如图：
101.pngwindow 系统的，请用 Putty 或 Xshell 来登录。
一般在新服务器创建后，建议先升级一下 CentOS：
代码语言：txt复制yum -y update常用的 Linux 命令
代码语言：txt复制cd 进入目录
cd .. 返回上一个目录
ls -a 查看当前目录
mkdir abc 创建abc文件夹
mv 移动或重命名
rm 删除一个文件或者目录3.2 安装 node
升级常用库文件, 安装 node.js 需要通过 g 进行编译。
代码语言：txt复制yum -y install gcc gcc-c autoconf跳转到目录：/usr/local/src，这个文件夹通常用来存放软件源代码：
代码语言：txt复制cd /usr/local/src下载 node.js 源码，也可以使用 scp 命令直接上传，因为下载实在太慢了：
下载地址：https://nodejs.org/en/download/ ，请下载最新的相应版本的源码进行下载，本人下载了 v10.13.0 版本的。
102.pnghttps://nodejs.org/dist/v10.13.0/node-v10.13.0.tar.gz下载完成后解压：
代码语言：txt复制tar -xzvf node-v10.13.0.tar.gz进入解压后的文件夹：
代码语言：txt复制cd node-v10.13.0执行配置脚本来进行预编译处理：
代码语言：txt复制./configure编译源代码，这个步骤花的时间会很长，大概需要 5 到 10 分钟：
代码语言：txt复制make编译完成后，执行安装命令，使之在系统范围内可用：
代码语言：txt复制make install安装 express 推荐 global 安装
代码语言：txt复制npm -g install express建立超级链接, 不然 sudo node 时会报 "command not found"
代码语言：txt复制sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo ln -s /usr/local/bin/node-waf /usr/bin/node-waf通过指令查看 node 及 npm 版本：
代码语言：txt复制node -v
npm -vnode.js 到这里就基本安装完成了。
3.2 安装 mongodb
下载地址：https://www.mongodb.com/download-center/community
下载时，请选对相应的环境与版本，因为本人的服务器是 CentOS ，其实本质就是 linux 系统，所以选择了如下图环境与目前最新的版本。
103.pngmongodb :
代码语言：txt复制软件安装位置：/usr/local/mongodb
数据存放位置：/home/mongodb/data
数据备份位置：/home/mongodb/bak
日志存放位置：/home/mongodb/logs下载安装包
代码语言：txt复制> cd /usr/local
> wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.4.tgz解压安装包，重命名文件夹为 mongodb
代码语言：txt复制tar zxvf mongodb-linux-x86_64-4.0.4.tgz
mv mongodb-linux-x86_64-4.0.4 mongodb在 var 文件夹里建立 mongodb 文件夹，并分别建立文件夹 data 用于存放数据，logs 用于存放日志
代码语言：txt复制mkdir /var/mongodb
mkdir /var/mongodb/data
mkdir /var/mongodb/logs打开 rc.local 文件，添加 CentOS 开机启动项：
代码语言：txt复制vim /etc/rc.d/rc.local
// 不懂 vim 操作的请自行查看相应的文档教程，比如： vim 模式下，要 按了 i 才能插入内容，输入完之后，要按 shift 加 :wq 才能保存退出。将 mongodb 启动命令追加到本文件中，让 mongodb 开机自启动：
代码语言：txt复制/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork启动 mongodb
代码语言：txt复制/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork看到如下信息说明已经安装完成并成功启动:
代码语言：txt复制forked process: 18394
all output going to: /var/mongodb/logs/log.logmongodb 默认的端口号是 27017。
如果你数据库的连接要账号和密码的，要创建数据库管理员，不然直接连接即可。
在 mongo shell 中创建管理员及数据库。
切换到 admin 数据库，创建超级管理员帐号
代码语言：txt复制use admin
db.createUser({ user: "用户名", pwd:"登陆密码", roles:[{ role: "userAdminAnyDatabase", db: "admin" }] })切换到要使用的数据库，如 taodb 数据库，创建这个数据库的管理员帐号
代码语言：txt复制use taodb
db.createUser({ user: "用户名", pwd:"登陆密码", roles:[ { role: "readWrite", db: "taodb" }] //读写权限 })重复按两下 control c ，退出 mongo shell。
到这里 mongodb 基本已经安装设置完成了。
3.3 服务器上开放端口与设置安全组规则
安全组规则是什么鬼
授权安全组规则可以允许或者禁止与安全组相关联的 CVM 实例的公网和内网的入方向和出方向的访问。undefined腾讯云安全组应用案例文档 80 端口是为 HTTP(HyperText Transport Protocol) 即超文本传输协议开放的,浏览器 HTTP 访问 IP 或域名的 80 端口时,可以省略 80 端口号
端口都配置对了，以为能用公网 IP 进行访问了么 ?
还有 防火墙 这一关呢，如果防火墙没有关闭或者相关的端口没有开放，也是不能用公网 IP 进行访问网站内容的。
和安全组端口同理，比如我们的服务要用到的是 3000 端口，就要开放 3000 的端口，不然是访问不了的；其他端口同理。
3.4 用 nginx、apache 或者 tomcat 来提供 HTTP 服务或者设置代理
我是用了 nginx 的，所以这里只介绍 nginx 。
开启 ngnx 代理
- 进入到目录位置
cd /usr/local/nginx- 在 nginx 目录下有一个 sbin 目录，sbin 目录下有一个 nginx 可执行程序。
./nginx- 关闭 nginx
./nginx -s stop- 重启
./nginx -s reload基本的使用就是这样子了。
如下给出我的 nginx 代理的设置：
我的两个项目是放在 /home/blog/blog-react/build/; 和 /home/blog/blog-react-admin/dist/; 下的，如果你们的路径不是这个，请修改成你们的路径。
代码语言：txt复制#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
# 如果port_in_redirect为off时，那么始终按照默认的80端口；如果该指令打开，那么将会返回当前正在监听的端口。
port_in_redirect off;
# 前台展示打开的服务代理
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#root /home/blog;
location / {
root /home/blog/blog-react/build/;
index index.html;
try_files $uri $uri/ @router;
autoindex on;
}
location @router{
rewrite ^.*$ /index.html last;
}
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://47.106.136.114:3000/ ;
}
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# HTTPS server
# 管理后台打开的服务代理
server {
listen 4444;
server_name localhost;
# charset koi8-r;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
location / {
root /home/blog/blog-react-admin/dist/;
index index.html index.htm;
try_files $uri $uri/ @router;
autoindex on;
}
location @router{
rewrite ^.*$ /index.html last;
}
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://47.106.136.114:3000/ ;
}
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
error_page 500 502 503 504 /50x.html;
}
}我是开了两个代理的：前台展示打开的服务代理和管理后台打开的服务代理，这个项目是分开端口访问的。
比如：我的公网 ip 是 47.106.20.666，那么可以通过 http://47.106.20.666 即可访问前台展示，http://47.106.20.666:4444 即可访问管理后台的登录界面。
至于为什么要写这样的配置:
代码语言：txt复制try_files $uri $uri/ @router;
location @router{
rewrite ^.*$ /index.html last;
}因为进入到文章详情时或者前端路由变化了，再刷新浏览器，发现浏览器出现 404 。刷新页面时访问的资源在服务端找不到，因为 react-router 设置的路径不是真实存在的路径。
所以那样设置是为了可以刷新还可以打到对应的路径的。
3.5 上传项目代码，或者用码云、 gihub 来拉取你的代码到服务器上
我是创建了码云的账号来管理项目代码的，因为码云上可以创建免费的私有仓库，我在本地把码上传到 Gitee.com 上，再进入服务器用 git 把代码拉取下来就可以了，非常方便。
具体请看：码云（Gitee.com）帮助文档 V1.2 http://git.mydoc.io/?t=180676
git 的安装请看： CentOS 7.4 系统安装 git https://www.cnblogs.com/hglibin/p/8627975.html
如果不想用 git 进行代码管理，请用其他可以连接服务器上传文件的软件，比如 FileZilla。
3.6 启动 express 服务
启动 express 服务，我用了 pm2， 可以永久运行在服务器上，且不会一报错 express 服务就挂了，而且运行中还可以进行其他操作。
安装：
代码语言：txt复制npm install -g pm2切换当前工作目录到 express 应用文件夹下,执行 pm2 命令启动 express 服务：
代码语言：txt复制pm2 start ./bin/www比如我操作项目时的基本操作：
代码语言：txt复制cd /home/blog/blog-node
pm2 start ./bin/www // 开启
pm2 stop ./bin/www // 关闭
pm2 list //查看所用已启动项目：3.7 页面加载优化
再看刚刚的 nginx 的一些配置：
代码语言：txt复制server {
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
}这个就是利用 ngonx 开启 gzip，亲测开启之后,压缩了接近 2/3 的文件大小，本来要 1M 多的文件，开启压缩之后，变成了 300k 左右。
做完一系列的优化处理之后，在网络正常的情况下，页面首屏渲染由本来是接近 5 秒，变成了 3 秒内，首屏渲染之前的 loading 在 1 秒内可见了。
