从零搭建项目(12) --- 部署: 后端部署

我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用jenkins自动化部署

前言

在上一篇文章中，我们介绍了前端相关的部署知识，这篇文章就来介绍后端方面的部署知识，涉及的内容如下:

1. Ubuntu安装MySQL并新建用户和数据库
2. 使用pm2跑后端项目
3. 通过环境变量设置后端数据库账密

Ubuntu安装MySQL并新建用户和数据库

1. 首先我们在服务器中执行下面的命令:
   sudo apt install mysql-server
   安装过程中会弹出一个框让你输入root用户的密码，这个密码务必记住:
   

   

   image.png

2. 然后执行下面两条命令安装mysql客户端和相关包:

sudo apt install mysql-client
sudo apt install libmysqlclient-dev

结束后输入sudo netstat -tap | grep mysql，如果有类似下面的输出，即表示安装成功:

image.png

3. 通过mysql -uroot -p命令并输入密码进入到root用户中，创建一个用户，和之前一样这里例子是创建了oxc用户，并且允许该用户允许任意地址链接:
   

   

   image.png
   
   然后给予oxc用户所有权限，并输入flush privileges;使得权限生效:
   
   

   image.png
   
   
   

   image.png

4. 输入sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf编辑mysql配置文件，将bind-address = 127.0.0.1配置注释掉，保存后输入service mysql restart重启mysql， 方便我们以后在本地用workbench登录:
   

   

   image.png

5. 去到workbench中，依据之前新建的用户新建一个连接，测试连接成功后就可以在本地使用workbench操作服务器里的数据库了:

   
   
   

   image.png
   
   

   然后点击这个链接进去后，输入命令创建一个名为test的数据库:

   
   
   

   image.png

使用pm2跑后端项目

• 编译出可执行的js文件
  上面的步骤完成后，我们就可以在服务器中clone后端项目，安装完项目并npm run buil出可执行的js文件后:
  

  

  image.png

• 安装并使用pm2
  我们可以使用npm install pm2 -g把pm2安装到服务器中。
  然后使用pm2启动后端项目:
  

  

  image.png

• 配置nginx
  之后我们去到之前配置前端项目的test.conf中，添加下面的配置:
  

  

  image.png
  
  之后通过sudo nginx -s reload重启nginx。

然后我们去网页中测试一下结果:
注册:

image.png

登录:

image.png

这样我们的后端也基本上配置完成了。

通过环境变量设置后端数据库账密

在之前的后端搭建过程中，我们的数据库配置账密都是明文的:

image.png

这样对于后端的安全来说非常不利，所以我们需要把生产环境的数据库账号密码隐藏起来，方法是使用环境变量。

• 开发环境设置
  在开发环境中，我们使用的是nodemon进行项目的运行，所以环境变量需要注入到nodemon的进程中，我们可以在根目录中新建nodemon.json文件，配置nodemon的环境变量:
  

  

  image.png
  
  然后去到ormconfig.js文件中，将需要隐藏的项修改为如下:
  
  

  image.png
  
  之后尝试重新运行后端，没有报错即为成功:
  
  

  image.png

• 生产环境设置
  生产环境的配置我们需要去到服务器中设置系统的环境变量达成目的，一般来说在Ubuntu系统中，可以在~/.bashrc文件中添加系统环境变量:
  

  

  image.png
  
  添加如下变量:
  
  

  image.png
  
  之后使用source ~/.bashrc使其生效:
  
  

  image.png
  
  如果能够echo出这个变量，那么就表示设置成功了:
  
  

  image.png
  
  之后我们重新更新服务器中后端项目的数据库配置:
  
  

  image.png
  
  使用pm2重启该项目即可:
  
  

  image.png

• 测试效果如果能够跑通，则表示成功:

  
  
  

  image.png

后记

到这里为止，前后端项目均已部署到了服务器上，并且能够运行起来了，但是这样的部署方式还是稍显麻烦了，所以下一章将会介绍使用jenkins配合github webhook进行前后端项目的自动化部署。