个人博客项目部署的过程和遇到的坑

首先插一嘴，我的个人博客项目使用的技术栈是：

• 前端
  • React.js
  • Next.js
• 后端
  • egg.js
  • mysql 数据库

该项目会放在我的GitHub上面。

1. 阿里云服务器

1.1 购置阿里云服务器

想要部署自己的博客，那么首先，必须购置一台属于自己的服务区，这里感谢阿里爸爸在疫情期间送给广大苦逼大学狗的半年的服务器（现在活动应该结束了，后续还可以续半年，但是怎么续我并不知道）。阿里云服务器的购买我就不给大家做示范了，网上有详细教程的，只要挑选符合自己配置要求的服务器，买买买就行了。这里我选择的操作系统是 CentOS7，如果有的小伙伴不太喜欢小黑窗操作的话，可以选择 windows server。

1.2 购置域名

想要被人看到你的博客，总不能让别人记住你的 ip 地址吧，所以我们需要购置阿里云的域名。打开 https://wanwang.aliyun.com/ 这个网址，在里面输入自己的域名的关键字，选择合适的*域名就可以了，这里我选择是 www.beginnerqian.cn（比较便宜的域名比如 .top .xyz 等，像 .com 和 .cn 等老牌的*域名比较贵）。

购买域名之后需要在阿里云域名控制台中填入信息模板，否则，该域名无法使用。

1.3 网站的备案

这里推荐直接使用阿里云的手机APP，在搜索框中搜索备案，比网站上的备案更加简洁明了。备完案之后，会有阿里云的工作人员过来核实确认。这里需要提醒一点，中国的服务器不经过备案是无法建站的，如果想要不备案建站，请购置阿里云海外或者香港的服务器。一般而言，1天的时间，备案审核足以。

1.4 绑定域名

打开阿里云域名控制台，找到域名列表，在操作中选择解析-添加记录，将自己的云服务器的 ip 地址填入即可。

1.5 开放端口

阿里云的服务器，如果小伙伴想要开放端口用来供外界访问，除了需要在CentOS中开放端口外（这个等会儿说），还需要在阿里云控制台的安全组中开放服务器的端口。下面是开放端口的步骤：

打开阿里云控制台，选择左侧菜单栏中的网络与安全-安全组：

打开后选择对应的服务器并配置规则（注意小伙伴你们的云服务器所在的地址-在左上角阿里云图标的旁边）

打开之后，即可配置自己想要的规则，其中几条规则是阿里云系统自动帮我们配置的，不动即可。点击左上角的添加安全组规则，选择开放的端口号，以及授权对象。如果想要所有的人都可以访问到这个端口号，设置成0.0.0.0/0 即可：

在控制台中开放端口后，我们需要进入服务器开放CentOS防火墙的端口，首先提一点，阿里云的轻量级CES服务器的防火墙都是默认关闭的，这里交由各位小伙伴进行考量，我是打开防火墙的。我使用的是阿里云自带的ssh控制台连接的服务器。在连接之前，需要重置一下服务器的密码。进入实例列表：

点击实例列表中实例的管理，选择更多，重置实例列表密码。

重置密码即可，然后选择远程连接，输入密码和用户（一般是root），即可连接CentOs（小黑窗操作各位怕不怕）：

进入终端界面，首先使用 systemctl status firewalld 确认防火墙的状态：

running，说明开启，stop，说明停止（我这里当然是开启的啦！）。如果停止，那么建议使用 systemctl start firewalld 开启防火墙并使用操作 systemctl enable firewalld.service 设置开机启动防火墙。开启防火墙之后，使用指令：

firewall-cmd --zone=public --add-port=3006/tcp --permanent 开启端口即可，需要注意的是，这时候需要使用 firewall-cmd --reload 重新加载防火墙，才能生效。当然，可以使用 firewall-cmd --list-ports 来查看自己开放的端口，与此同时，可以使用 firewall-cmd --remove-port=3006/tcp --permanent 关闭已经开放的端口，这个时候，还需要重启。（如果成功，终端会显示 success 说明操作成功）

端口开放完成，即可将自己的博客的前后端部署在服务器上了！

2. 后端部署

2.1 安装 node

我的后端使用的是阿里爸爸的 egg.js，也就是说，我使用的是 node，那么，首先，我们得先部署一下我们的环境。

去 node.js 的官网找到合适的 node 版本，这里我用的是 node-12.16.1（更新得真快！），这里直接贴出下载的网址：https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1.tar.gz。

然后在终端中使用 wget 命令，下载这个node.js：

wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1.tar.gz

它会下载在你终端进入的当前目录里面，所以，先 cd 进一个好地方。

然后，由于使用的是 tar.gz 格式的压缩包，我们使用

tar zxvf /usr/local/node-v12.16.1 -C /usr/local/node

将其解压到 /usr/local/node 下。然后，我们需要一些软件包来支持 node 源码的编译，打开终端，下载 gcc 和 gcc++

yum install gcc gcc-c++

下载好 gcc 和 gcc-c++后，（这里需要注意，如果我记得没错的话，编译该版本 node 需要 gcc7.5 及以上，如果 yum 下来的版本不够，需要手动编译安装对应或者更高版本的 gcc，网上有，这里不做演示，实际上是忘记当时我怎么升级的了）进入到解压好的文件夹中，使用

..configure 命令进行配置，

然后使用

make 命令进行编译（等吧，小伙子！）

编译完成之后，使用

make install 进行安装（等吧，小伙子！）

安装完成之后，使用 node --version 查看版本来确认是否安装成功。

2.2 安装 mysql8.x

安装完 node 之后，我们需要去安装 mysql，mysql的安装需要去 msyql 官网下载，我下载的是 8。

这里给出网址：https://dev.mysql.com/downloads/repo/yum/，具体的需要根据自己的系统的版本进行选择，这里给出的都是 CentOs 的。

使用 wget 指令下载对应系统版本的 mysql，比如 CentOS 8：

wget https://dev.mysql.com/downloads/file/?id=489467

然后就可以直接使用 yum 安装了

yum -y intall mysql80-community-release-el8-1.noarch.rpm

这步可能会花些时间，安装完成之后会覆盖掉之前的 mariadb。

在安装的过程中，应该会给出密码，但是没有记住，没有关系，我们可以通过以下命令：

grep "password" /var/log/mysqld.log

在 mysql 的日志中找到密码

然后登入数据库，使用一下命令修改密码：

ALTER USER 'root'@'localhost' IDENTIFIED BY 'new password';

可能会出现

Error 1819:Your password does not satisfy the current policy requirements 这样的错误。原因是因为 Mysql 有密码保护设置，我们可以将 validate_password_policy 设置成 low：

set global validate_password_policy=0

这里还有一个问题，一些后端框架，可能在设置正确的用户名和密码的情况也不能进入数据库，会报出：

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

这是由于 mysql8 使用了新型的密码模式，叫做强密码模式，我们可以通过指令

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'newrootpassword';

来设置成 mysql5 的密码验证模式。

到此为止，mysql8 便安装完成。

2.3 Nginx 的安装

首先，去Nginx的官网上下载最新的稳定版本，这里给我下载的版本的地址：

http://nginx.org/download/nginx-1.16.1.tar.gz

使用 wget 命令进行下载：

wget http://nginx.org/download/nginx-1.16.1.tar.gz

下载会下载在当前目录，所以 cd 到一个合适的目录中哦。

然后进行解压

tar zxvf /usr/local/nginx-1.16.1.tar.gz -C /usr/local/

这里会解压到 /usr/local/nginx-1.16.1.tar.gz。

然后，需要安装相关的依赖包，之前安装 node 已经安装过 gcc -c++了，这里就再列出来

yum install gcc -c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel

接着，cd 进解压的包，进行自定义配置

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

这里的 --with-http_ssl_module 是开启 ssl 模块。还可以添加 nginx 的压缩模块，不过我没有配置，有兴趣的可以去看看 nginx 的文档。

然后使用

make 进行编译（这个没有多长时间）

make install 安装

安装完成，进入 nginx/sbin 使用命令

./nginx -V 查看已配置的参数。

这样，后端的环境，大致算是配置完成了。

3. 前端环境的部署

前端环境其实安装完 node 和 nginx 就已经没有很多需要安装的了，这里我习惯使用 yarn，同时由于我们前端页面使用的是 React.js 的 SSR（服务器端渲染）框架的 Next.js。我们需要安装 pm2 将 Next.js 进程作为守护进程。

3.1 安装 yarn

首先，添加 yarn 源：

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

然后使用

yum install yarn

3.2 安装 pm2

yarn global add pm2

到此前端环境部署完成

4. ftp 的安装与配置

4.1 安装 vsftpd

首先，去阿里云控制台开放 21 端口，然后在终端中，使用命令

firewall-cmd --zone=public --add-port=21 --permanent 开放 21 端口

然后，安装 vsftpd

yum istall -y vsftpd

设置成开机启动

systemctl enable vsftpd.service

启动

systemctl start vsftpd.service

4.2 配置

#打开配置文件
vim /etc/vsftpd/vsftpd.conf

#显示行号
:set number

#修改配置 12 行
anonymous_enable=NO

#修改配置 33 行
anon_mkdir_write_enable=YES

#修改配置48行
chown_uploads=YES

#修改配置72行
async_abor_enable=YES

#修改配置82行
ascii_upload_enable=YES

#修改配置83行
ascii_download_enable=YES

#修改配置86行
ftpd_banner=Welcome to blah FTP service.#修改配置100行chroot_local_user=YES

#添加下列内容到vsftpd.conf末尾
use_localtime=YES
listen_port=21
idle_session_timeout=300
guest_enable=YES
guest_username=vsftpd
user_config_dir=/etc/vsftpd/vconf
data_connection_timeout=1
virtual_use_local_privs=YES
pasv_min_port=40000
pasv_max_port=40010
accept_timeout=5
connect_timeout=1allow_writeable_chroot=YES

4.3 新增用户

adduser username;
passwd password

新建用户只有在 /home/ 文件夹下有权限。由于只是上传文件，所以这里就不添加更多的新权限了。

4.4 修改 /etc/pam.d/vsftpd 文件

# 修改前先备份 

cp /etc/pam.d/vsftpd /etc/pam.d/vsftpd.bak

vi /etc/pam.d/vsftpd
#先将配置文件中原有的 auth 及 account 的所有配置行均注释掉
auth sufficient /lib64/security/pam_userdb.so db=/etc/vsftpd/virtusers 
account sufficient /lib64/security/pam_userdb.so db=/etc/vsftpd/virtusers 

# 如果系统为32位，上面改为lib

4.5 重启 vsftpd 服务器

systemctl restart vsftpd.service

4.6 关闭 SELINUX

阿里云的轻量级ESC其实是默认关闭的（和防火墙一样）

#打开SELINUX配置文件
vim /etc/selinux/config


#修改配置参数
#注释  
SELINUX=enforcing

#增加  
SELINUX=disabled


#修改完成后，需要重启！

5. 部署 React.js 项目

5.1 打包 React.js 项目

在部署项目之前，需要将你的 React 项目中的所有的 api 接口换成你阿里云服务器上的接口，比如阿里云服务器后端的接口是：

www.jdlsaifjefadls/api

那么你就需要改成这个。

然后，确认你的 React 项目的主页，在 package.json 中，写入

homepage:"www.xxx.cn"

来确认你的主页。否则，很可能出现打开之后是一片空白的情况。

在 windows 上打开命令控制行，进入 React.js 项目的目录，使用

yarn build 或者 npm run build

进行打包

把打包好 build 文件夹通过 ftp 工具上传至阿里云服务器。然后使用

tar zxvf 目标文件 -C 解压到

命令解压到 nginx/html 文件夹下即可。

5.2 nginx 服务器的设置

这里，如果想要直接输入域名 + uri 即可访问页面的话，我们需要使用 nginx 的代理端口的功能。当然，首先是将我们的 React 项目进行配置：

http {
	server {
		listen 3006;
		server_name localhost;
		location /management {
			root html;
			try_file $uri /management/index.html;
		}
	}
}

这里监听 3006 端口，将这个端口作为 React 项目部署的端口，其中 location 后面跟着的 /management 便是需要在 react 项目 package.json 中配置的主页。

这里的 try_file 的含义是尝试寻找文件，去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。

我这里所配置的意思是，寻找 $uri 这个文件，如果找不到 $uri 这个文件，那么发起一个内部“子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/management/index.html。所以，我们 react 项目的主页，必须是 /management。

为了使直接输入 www.域名/management.cn 可以直接看到 react 项目，我们需要监听 80 端口，将 3006 端口进行代理。

server {
	listen 80;
	server_name 你所购买的域名;
	location /management {
		proxy_pass http://127.0.0.1:3006;
	}
}

这样，输入 www.域名/managemt 便可以看到我们的react项目了。

6. 为 nginx 的配置

6.1 配置 ssl，打开 https

这里推荐直接去阿里云上面获取个人免费版本的ssl证书，因为这份证书由 ca 保证。一般是 1 年份的。

然后，去控制台中下载

下载完成之后，将文件使用ftp工具上传到阿里云服务器上。

然后解压值 /cert 文件夹下，

然后对其进行配置，由于之前我已经打开 nginx 了 ssl 功能，所以按一下进行配置：

server {
        listen 443 ssl;
        listen 80;
        server_name www.beginnerqian.cn;
        ssl_certificate 名字.pem; # 这是下载的文件里面的.pem
        ssl_certificate_key 名字.key; # 这是 .key 文件
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; # 使用的加密
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # 使用的协议
        ssl_prefer_server_ciphers on;
    }

这里开启ssl需要监听 443 端口，默认。为了在打开 ssl 时可以直接通过 80 端口进行访问，这里我同时监听 80 端口。因为之前使用这样的配置：

server {
        listen       80;
        server_name  www.beginnerqian.cn;
        return 301 https://www.beginnerqian.cn$request_uri;

        charset koi8-r;

        access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://127.0.0.1:3000;
        }

        location /img {
            alias /usr/local/react_blog/service;
            autoindex on;
        }

        location /management {
           proxy_pass http://127.0.0.1:3006;
        }
  	}

导致进行访问时会出现 404，如果有知晓的同志劳烦告诉我一下。

这样 ssl 证书便已经配置完成。

6.2 配置图片路径

在 server 中直接使用 location 进行配置

location /img {
    alias /usr/local/react_blog/service;
    autoindex on;
}

这里提一嘴 alias 和 root 的区别。

如果使用 root，

location /request_path/img {
	root /local_path/img ;
}

在客户端请求 /request_path/img/cat.jpg 时，nginx 会把请求映射为

/loca_path/img/request_path/img/cat/jpg

如果使用 alias，nginx 会把请求映射为

/local_path/img/cat.jpg

7. 部分 CentOS 指令参考

7.1 防火墙指令

查看已开放端口

firewall-cmd --list-port

---

开放端口

firewall-cmd --permanent --zone=public --add-port=端口号/tcp

指令含义：

zone #作用域

add-port=端口号/tcp #添加端口，格式为：端口/通讯协议

permanent #永久生效，没有此参数重启后失效

例子：

firewall-cmd --permanent --zone=public --add-port=3306/tcp

---

批量开放端口

firewall-cmd --permanent --zone=public --add-port=端口号-端口号/tcp

---

关闭端口

firewall-cmd --permanent --remove-port=端口号/tcp

---

批量关闭

irewall-cmd --permanent --remove-port=8300-8399/tcp

---

防火墙启动

systemctl start firewalld.service

---

防火墙重启

firewalld-cmd --reload

---

防火墙关闭

systemctl stop firewalld.service

7.2 解压命令

tar.gz

tar zxvf /路径/文件名.tar.gz -C /目标文件夹/

7.3 重命名

mv /文件夹/原名称 /文件夹/目标名称