从零搭建项目(12) — 部署: 后台部署

作者 : 开心源码 本文共1845个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共118人阅读

我的博客地址

正式地址
演示网站
前台源码
后台源码

文章目录

  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-clientsudo apt install libmysqlclient-dev

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

image.png

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

    image.png
    而后给予oxc客户所有权限,并输入flush privileges;使得权限生效:
    image.png
    image.png

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

    image.png

  3. 去到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进行前后台项目的自动化部署。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 从零搭建项目(12) — 部署: 后台部署

发表回复