正儿八经的前端项目部署流程（交流分享）

时间：2021-2-20 作者：admin

一、写在前面

项目部署作为网页开发中必不可少的一环，每一名合格的前端开发都应当有所了解，而不是不闻不问。不可否认的是，初次经历整个部署流程会遇到不少曲折，但这些难得的经验对于我们理解从在浏览器输入网址，出现网页内容，再到与之交互的整个流程甚至细节都有着不可或缺甚至无法替代的作用。在这个弱肉强食的世界，只有手里的兵器足够锋利，在面对凶狠的敌人时才能站得住脚。

大概年初的时候，初出茅庐的我完成了真正意义上第一个自己的网站。现在回想起来，隐隐约约还能感受到那时伴随着我的头痛——从购买服务器到能通过浏览器打开网站整个过程中遇到的阻碍。仔细一想，也许正是这些阻碍，驱使着自己不断向前。时至今日，2020年也快收尾，自己的进步是显然易见的。特别是再遇到难以解决的BUG，自己也不再吐苦水，而是冷静地应对。个人认为，能否正确对待BUG也是一种能力，这种能力对于提升编程体验和个人编程水平来说有着非凡的意义。

最近刚上线了个人博客网站——Freesism，所以我又将部署流程过了一遍，并将它记录下来，分享出去。这也是我第二次写作，希望多多少少可以帮助到有需要的人，也以此激励自己在未来变得更加勤奋和刻苦。

提示：Freesism使用的前端技术栈是Vue2，服务端Nestjs，数据库MySQL。本文将呈现如何在本地打包vue项目后，将其部署到远程服务器，并可以在浏览器输入IP地址（域名地址）进行访问，同时部署Nestjs服务提供数据接口。因本人水平有限，以下内容仅作为个人经验分享，如有错误请及时指正，感谢！

实践是检验真理的唯一标准。

二、准备工作

以下条件是必备的：

  • 拥有一台服务器。
  • 选择合适的用于连接和操作远程服务器的工具。
  • 一颗执着的心和勤劳的双手。

关于如何选择和购买服务器本文将不展开讨论，市面上有很多厂商，选择适合自己的就可以。我目前使用的是在校期间购买的阿里云轻量服务器，这里仅供参考。除此之外，建议购买一个自己想要的域名并按照需求进行域名备案和域名解析。

关于服务器系统，这里我选择的是Ubuntu 18.4 ，市面上的系统大同小异，这里不做深入探讨，有兴趣请自行研究。个人常用于连接和操作远程服务器的工具主要有Xshell，Xftp，WinSCP，Remote-SSH（vs-code插件），市面上还有很多，选择自己喜欢的就好。下文将使用Xshell 6进行操作展示。

一切准备就绪，开干！

三、初始化

第一步：连接远程服务器。

进入服务器控制台，复制公网IP（也可使用绑定的域名代替IP）。

使用Xshell 6建立连接。

点击连接，根据提示输入用户名（初始用户名一般是root）和密码，出现以下界面，即连接成功。

PS：后续对远程服务器进行操作时，建议不使用root账号，这里是为了方便演示，最好新建一个子用户，创建子用户和授权等具体操作请自行搜索。如果使用子用户，如果没有授权后续操作可能提示权限不足，这时要在命令前加上 sudo，以提升自己的权限。

第二步：更新和安装必需包。

依次输入以下命令：

sudo apt-get update # 更新软件列表

sudo apt-get upgrade -y # 对比各软件版本并更新

sudo apt-get install nodejs -y # 安装nodejs

sudo apt-get install npm -y # 安装npm

sudo npm install n -g # 安装nodejs版本管理器

n latest # 更新nodejs至最新版本，可自行选择，更新完成记得重新连接服务器输入 node -v 检查是否更新成功

sudo npm install pm2 -g # 安装pm2，node进程管理工具，这里主要用于持久化运行和监控nestjs服务器

第三步：安装Nginx。

sudo apt-get install nginx -y # 安装nginx服务器

service nginx start # 启动nginx服务器

以上操作顺利完成后，在浏览器输入公网IP或绑定的域名后，出现以下页面即表示nginx服务启动成功。

第四步：安装MySQL。

sudo apt-get install mysql-server -y # 安装mysql服务

sudo systemctl status mysql.service # 检查mysql服务是否开启，出现active (running)代表已开启

使用默认用户登陆：

sudo cat /etc/mysql/debian.cnf # 查看默认配置，找到user和password两项

mysql -u user -p # 使用默认用户登陆，user替换为默认配置中的user，根据提示输入password

sudo service mysql restart # 重启mysql

mysql -u root -p # 使用root登陆，成功登陆即密码修改成功

登陆成功后，输入以下mysql语句，修改root用户密码：

update mysql.user set authentication_string=password('密码') where user='root' and Host ='localhost';
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '密码';
flush privileges;
quit;

为了方便调试以及本地数据库和远程服务器的数据库的统一，这里介绍如何通过SQLyog远程连接mysql服务。首先检查服务器是否开放3306端口：

netstat -an | grep 3306 # 检查是否开放3306端口

开放3306端口：

cd /etc/mysql/mysql.conf.d # 进入mysql配置目录

vim mysqld.cnf # 使用vim编辑

编辑完后按Esc键，再同时按shift+:，输入wq，按enter保存退出。vim编辑器详细操作请自行查阅，下文将不再提示。

开启端口后，再次进入mysql，开放所有远程连接权限给root用户。

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'IDENTIFIED BY '密码' WITH GRANT OPTION;

FLUSH PRIVILEGES; # 刷新权限数据

exit; 

sudo service mysql restart # 重启mysql服务

使用SQLyog建立远程连接：

连接成功后，就可以在本地利用可视化工具直接操作远程mysql服务了。至此，初始化工作就结束了。

四、自动化部署

在以往，我们会使用Xftp这类传输工具将打包好的资源文件复制到远程服务器上。现在，自动化方案已经足够多到我们自由选择，当我们需要频繁地更新资源时，自动化帮我们省了不少操作。这里我主要介绍个人常用的Git Actions，在本地只需几行git命令就能完成自动化部署。具体操作步骤如下：

第一步：安装Git。

sudo apt-get install git -y

第二步：初始化Git仓库。

cd /opt # 进入opt目录

git init website.git --bare # 初始化仓库

第三步：添加post-receive钩子 。

cd website.git/hooks # 进入hooks文件夹

touch post-receive # 新建post-receive文件

vim post-receive # 通过vim编辑该文件

敲I键进行编辑模式，写入以下代码：

#!/bin/bash 
# 定义该文件使用 bash 执行

echo 'remote server: receive code...'
# 上面的输出信息当我们在本地push代码后出现

cd /website 
# 切换至用于存放代码的目录，可自主选择

git --git-dir=/opt/website.git --work-tree=/website checkout master -f
# 指定git文件以及要checkout的分支和目录

# 进入前端项目，安装和打包
cd /website/web 
echo 'web running npm install...'
npm install \ 
&& npm run build \
&& echo 'web builded.'

# 进入服务端项目，构建并运行
cd /website/server 
echo 'server running npm install...'
npm install \
&& npm run build \
&& echo 'server builded.' \
&& npm run pm2 \ 
&& echo 'done.'

保存退出后，在命令行输入以下代码将post-receive文件的拥有者设置为root用户。

sudo chmod +x post-receive

第四步：在本地项目添加git remote指向。

git remote add prod ssh://root@[远程服务器公网IP或域名]/opt/website.git 

git remote -v # 检查是否添加了指向远程服务器的origin

配置成功后，我们只需要通过 git push prod 命令就可以将本地代码推送到远程服务器，服务器会根据post-receive配置文件执行后续打包，运行等一系列操作。

PS：npm install 指令如果安装太慢可配置淘宝镜像，如何配置请自行查阅。post-receive文件中的指令可以根据实际项目情况进行编写，例如上文的npm run pm2，实际执行的是pm2 startOrRestart pm2.json，用来运行和监控nestjs服务。pm2.json是PM2的配置文件，具体配置请戳PM2文档—— JSON 配置，也可以直接使用PM2命令，这里不再赘述，详情请看文档。

五、修改Nginx配置

Nginx的强大是毋庸置疑的，想必也不用过多介绍。作为从未接触过它的前端来说，可能会感到陌生，甚至有畏惧感。拿我个人经历讲，第一次看它的配置文件的时候也是一头雾水，每次修改都是小心翼翼，生怕出错回不了头。不过，在自己动手配置过几次之后，对于它的畏惧感也逐渐消失，这也让我明白了一个道理——凡事先难后易。

多的不说了，直接上配置步骤吧。

第一步：在/etc/nginx/sites-enabled目录下新建配置文件。

sites-enabled目录下存放的是当前启用的站点配置，我们可以根据需求新建多个虚拟主机。例如我的主域名http://www.striveforus.com/指向我的博客网站。

cd /etc/nginx/sites-enabled 

touch striveforus.com.conf # 创建站点配置文件，名字自取，记得加上conf后缀

vim striveforus.com.conf # 编辑该文件

按I键，写入以下代码：

server {
    listen      80; # 监听80端口
    listen      [::]:80; # 同上，IPv格式
    server_name www.striveforus.com; # 要匹配的域名，可以配置多个，也可以配置子域名。

    # 根资源地址，我将前端项目打包后的资源文件存放在server目录下，作为nginx静态资源。
    # 这里可以按自己需求修改。
    root  /website/server/mobile/;
    index /index.html; # 根资源地址下的根文件

    # 前端数据接口反向代理配置，前端axios配置中的baseURL为'/web/api'
    # 匹配以/web/api/开头，反向代理到nestjs服务器（确保运行端口与下面一致）处理
    location /web/api/ {
        proxy_pass http://127.0.0.1:3000/; 
    }

    # 通用匹配
    location / {
        # 解决spa跳转路由后刷新404
        try_files $uri $uri/ /index.html;
    }
}

保存退出后，重启nginx服务：

service nginx reload

然后打开浏览器输入网址：

上面的基本配置是可行的，但是实际需求往往不止于此，例如还需要设置子域名，设置http头部，做跳转，重定向，开启gzip压缩等等，都需要继续添加配置。

第二步：根据需求添加配置。

例如现在我有一个需求是为网站添加一个管理后台，但是并不想在http://www.striveforus.com/xxx下访问，而是通过类似admin.striveforus.com这样的子域名访问，而且前端打包后的资源是作为nestjs服务器下的静态资源。我的解决方法如下：

先在主域名下添加一条记录。

然后在sites-enabled目录下添加虚拟机配置文件。

touch admin.striveforus.com.conf # 新增

vim admin.striveforus.com.conf # 编辑

写入以下代码：

server {
    listen      80; 
    listen      [::]:80;
    server_name admin.striveforus.com;

    location / {
        # 确保nestjs服务在3001端口
        proxy_pass http://127.0.0.1:3001/;
    }
}

保存退出后重启nginx服务：

service nginx reload

打开浏览器测试：

子域名配置成功了。其他配置还有很多，这里不再一一展示，稍微费点心思搜索就能找到。如果实在是懒得自己动手配置，这里我推荐一个自动生成Nginx配置的网站——NGINXConfig，可以根据自己的需求生成配置文件，非常方便快捷。

第三步：升级https。

关于为什么要升级https以及它的优点，这里不再赘述，请自行查阅。升级https的关键就是搞到一张证书，通常是收费的，不过也有免费的，可以自行在网上发掘。我个人暂时用的是Let’s Encrypt的免费证书，也推荐给大家，因为确实是很方便，只需要选择服务器和系统，按照下面的安装步骤操作就完事了。

六、小结

本文主要分享了个人前端项目部署到线上的整个流程，主要包括以下几点：

  1. 如何连接远程服务器，安装和更新需要的工具包。
  2. 怎么使用Git Actions自动化。
  3. 根据需求修改Nginx配置，升级https。

好了，以上就是本文的全部内容。

欢迎大家访问我的博客——Freesism，一起沟通交流。

感谢阅读，欢迎分享！

No related posts.

声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

今日推荐

java中接口和抽象类的区别（保证你一看就懂）

先单独说一点，让你可以在朋友面前装逼：接口也能被继承，只不过是被接口继承 对比： 1、都能包含抽象的方法，这些 […]