全栈项目打包部署总结（保姆级教程，有🙌就会，阿里云服务器）

前端王
1,484 阅读6分钟

「本文已参与低调务实优秀中国好青年前端社群的写作活动」

前言

最近写了一个全栈项目,技术栈为React + egg.js + mysql，之前也有买服务器，就准备部署上去。本文分五部分服务器购买、服务器远程连接、安装宝塔面板、服务器环境安装配置、前后端打包到服务器及数据库创建记录了部署的过程，以及一些经验，希望可以帮助到需要部署项目的朋友们😊😊😊

服务器购买（以阿里云为例）

进入阿里云官网

进入阿里云官网

选择服务器

选择-产品-弹性计算-云服务器，选择轻量应用服务器或云服务器（笔者选择的是轻量应用服务器）

image.png

image.png

按需购买

根据自己的需求选择相应的配置购买（可以参考下图，地区选择离自己近的，系统选择CentOS，系统购买后是可以重置的，不用担心，其他配置根据💴自行选择）

image.png

image.png

进入控制台配置

在-我的阿里云-产品-控制台就可以对刚刚购买的服务器进行相应的配置

image.png

image.png

image.png

服务器远程连接

配置防火墙规则

在阿里云控制台，选择-安全-防火墙-添加规则，如图添加端口22（SSH端口，用于通过命令行模式远程连接Linux服务器或vps。）、端口80（用于HTTP服务提供访问功能，例如，IS、Apache、Nginx等服务。）和端口8888（一般为宝塔面板的默认端口）三个规则

image.png

image.png

image.png

远程控制软件

下载远程连接软件（笔者使用的是FinalShell，超级好用，功能强大，点击下载）

连接

使用远程连接软件连接服务器 打开FinalShell，点击这个文件夹

image.png

点击这个小文件夹，然后选择SSH连接

image.png

输入服务器公网IP（阿里云服务器可以查看），选择认证方法（这里是选择的密码验证，也可以选择密钥认证），用户一般是root，密码是我们服务器的管理密码（在阿里云控制台可以重置，见下图）

image.png

383F9D012D5B4047763A3405AF85FF09.png

image.png

双击，连接成功（没成功的小伙伴检查服务器是否开启，是否添加服务器的防火墙规则打开端口22，检查密码是否正确）

image.png

image.png

然后我们就可以在终端输入命令控制我们的服务器了，直接拖拽文件到下面就可以上传文件

安装宝塔面板

宝塔官网注册

进入宝塔官网，注册一个账号（宝塔面板支持Linux与Windows系统。一键配置:LAMP/LNMP、网站、数据库、FTP、SSL,通过Web端轻松管理服务器。）

宝塔安装

  • 首页选择-产品-linux，点击立即免费安装

image.png

  • 往下滚找到Linux面板安装脚本，选着对应系统的安装命令，比如Centos安装脚本： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

image.png

  • 在连接上服务器的FinalShell终端输入上面的命令，等待几分钟，安装成功，这里会显示宝塔后台地址和账号密码，这三个如果忘记了，在终端输入bt，然后输入14，即可查看（如下图）

image.png

image.png

  • 在浏览器输入刚刚的后台地址，输入账号密码登录（若失败检查服务器防火墙规则端口8888是否开放，检查地址、账号密码是否正确）

image.png

  • 成功登录（成功登录后可以在面板设置里面，修改宝塔面板的账号密码）

image.png

服务器环境安装配置

宝塔系统推荐环境

进入宝塔面板，系统可能会推荐你安装下面两种基本环境，你可以选着一种安装

image.png

等待安装完成即可

image.png

自定义安装软件

自定义安装自己需要的软件，在面板的-软件商店-搜索相应的软件

image.png

推荐安装的软件

  • Nginx（Nginx是一款轻量级的网页服务器、反向代理服务器。相较于Apache、lighttpd具有占有内存少，稳定性高等优势。它最常的用途是提供反向代理服务。）
  • MySQL（MySQL是一种关系数据库管理系统）
  • PM2管理器（node.js管理器，内置 node.js + npm + nvm + pm2）
  • 宝塔SSH终端（完整功能的SSH客户端，仅用于连接本服务器）

前后端打包到服务器及数据库创建

前端部署

打包部署前端项目（该项目使用react编写，使用create-react-app 脚手架创建，自带webpack打包）

在本地终端打开前端项目，输入npm run build或yarn build

image.png

等待打包完成，生成build文件夹

image.png

进入宝塔，点击文件，来到/www目录下，点击新建文件（文件名为你的项目名称）

image.png

来到新建文件的目录下，例如我的路径是/www/poemApp,点击上传，将打包好的前端项目build拖进来，点击开始上传

image.png

点击软件商店，设置nginx

image.png

点击配置修改，找到server，修改为以下内容（配置了listen端口号和root路径,并且将图片、js、css设置为强缓存）

```
server {
        # 设置80端口号
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
    
        # root后面的路径是刚刚上面前端项目的路径
        root        /www/poemApp/build;
    
        include /etc/nginx/default.d/*.conf;

        location / {
        }
        location ~ \.(gif|jpe?g|png)$ {
          # 图片设置强缓存
          root /www/poemApp/build/;
          add_header Cache-Control max-age=360000;
        }
        location ~ \.(js|css)$ {
          # js、css设置强缓存
          root /www/poemApp/build/;
          add_header Cache-Control max-age=360000;
        }
    
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
```

image.png

点击性能调整，配置GZip 压缩（gzip是一种流行的数据压缩程序。您可以使用gzip压缩Nginx实时文件。这些文件在检索时由支持它的浏览器解压缩，好处是web服务器和浏览器之间传输的数据量更小，速度更快。）

image.png

打开浏览器，输入自己服务器的公网ip或域名,即可访问到自己的前端项目（如何购买域名并解析，点这里）

image.png

数据库创建

本地导出sql文件,例如在Navicat导出某个数据库的结构和数据,右键数据库->转储SQL文件->结构和数据，然后选择生成文件的的存放路径即可

image.png

image.png

进入宝塔面板，点击数据库->点击添加数据库

EJZQP7$ZG2X8)EEK2IGL5YG.png

点击导入，选择刚刚本地导出sql文件，等待导入成功

image.png

使用Navicat远程连接服务器的数据库，测试一下

image.png

连接成功，成功获取到服务器的数据库

image.png

后端部署

打包上传后端项目（后端项目使用node框架egg.js编写）

上传后端项目到服务器，路径和前端项目同级，如下图

image.png

来到宝塔面板，找到软件PM2管理器（PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等），点击设置

image.png

添加项目,PM2可以服务器一直运行后端项目，守护进程（服务器记得安装node环境，不会的话点这里，也可以在终端使用npm install -g pm2来使用PM2，可以参考这个教程）

image.png

然后可以使用Postman来测试后端是否运行成功，我这边也是成功访问到

image.png

最后

至此，一个项目的前后端以及数据库都已经成功部署到服务器上，如果觉得对你有帮助的话，希望能帮忙点一个 star，非常感谢~😊😊😊

avatar
文章
阅读
粉丝