从零搭建项目(11) --- 部署: 使用nginx部署前端项目

我的博客地址

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

文章目录

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

前言

在前面的十篇文章中，我们已经可以在本地进行跑起前端和后端项目，一般来说前端项目在完成后，都会进行打包工作，之后部署在服务器上的就是打包出来的静态文件，所以在这篇文章中，将会介绍前端项目如何部署上服务器，内容如下:

1. 将前端项目放上服务器中
2. 安装并使用Nginx
3. 使用免费https证书
4. 使用nginx压缩文件

注意:

1. 该文章的实行步骤建立在之前前端搭建文章的基础上
2. 想要实践该文章之前，首先需要购买服务器(最好使用重装系统后的服务器)以及域名(最好已经备案完毕)，另外，我本人使用的服务器是Ubuntu系统。

将前端项目放上服务器中

• 在服务器中安装必须的依赖
  首先我们需要先在服务器中安装需要的依赖，包含git、node。
  安装之前我们首先更新一下服务器包索引:
  sudo apt update
  image.png
  更新完毕后安装git:
  sudo apt install git
  当输入如下命令后即表示安装完毕:
  image.png
  然后安装node:
  我暂时使用10+版本的node，输入如下命令:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

image.png
等运行和下载完毕后输入node -v和npm -v检测是否完成安装:
image.png

• 在服务器中编译出静态文件
  安装完上述依赖后，我们使用git将前端项目clone下来，然后进入其中安装项目依赖:
  image.png
  之后使用npm run build编译出静态文件:
  image.png
  做完这些步骤后，我们可以先暂停一下了，先进行Nginx的配置。

安装并使用Nginx

• 安装Nginx
  在Ubuntu中安装Nginx非常简单，使用sudo apt install nginx即可安装。
  nginx默认使用80端口，在安装完毕后，我们去到浏览器中输入服务器的ip地址看到以下界面即表示安装成功:
  

  image.png

• 配置nginx
  这一步是重点。
  在我的服务器中，nginx的主配置目录位于/etc/nginx/中:
  

  image.png
  我们进到nginx.conf中查看一下，会看到有这么一行配置:
  image.png
  这行配置的意思是位于/etc/nginx/conf.d里面的以.conf结尾的文件都可以作为nginx的子配置生效，那么我们就不必要在主配置中进行修改了。
  去到/etc/nginx/conf.d新建一个test.conf文件，并使用如下配置:
  image.png
  之后退出到命令行使用sudo nginx -s reload重启nginx:
  image.png
  现在我们在浏览器中输入ip地址就能直接进入到网页中了:
  image.png

• 绑定域名

1. 这一步开始前提是已经拥有域名最好已经备案(大概需要花费一星期到半个月时间)过的。
   然后去到服务器的管理后台中(我的是腾讯云，其他的厂商操作大同小异)，点开云解析页面，点击添加解析并填入你的域名:
   

   image.png
   解析状态为正常解析后，点击域名进入记录添加界面:
   image.png
   解析界面中，@和www一般来说是第一次添加域名记录时候产生的，是针对于主域名的记录。我们不用这个记录，另外再添加一个二级域名的记录(oxc.com为主域名的话，test.oxc.com就是二级域名)。
   image.png
   image.png

2. 域名添加记录后，我们回到服务器中，编辑刚才的nginx配置，将server_name一项改成刚才添加的二级域名，然后sudo nginx -s reload重启服务器:
   

   image.png
   现在回到浏览器中，输入刚才的二级域名:
   image.png
   这样我们的前端项目基本上就部署成功了。

使用免费https证书

注意：阿里云443端口需要在安全组规则中添加 443/tcp 端口，否则无法使用443端口。
本节将会介绍如何使用Let’ s Encrypt提供的免费https证书。

• 安装acme.sh
  acme.sh是一个可以自动生成证书、更新证书的shell脚本，因为免费Let’ s Encrypt证书时效性较短(三个月过期?)，所以这款脚本工具非常实用。
  首先我们安装它，可以使用下面的命令进行安装:
  wget -O - https://get.acme.sh | sh
  安装完毕后在命令行输入acme.sh，如果有下面的命令提示就表示安装成功:
  

  image.png

• 申请和下载证书
  首先我们使用下面的命令申请和下载证书，这里需要注意，test.oxcblog.club换成你自己的域名，/home/ubuntu/test/dist换成你自己的项目静态文件所在路径。

acme.sh --issue -d test.oxcblog.club -w /home/ubuntu/test/dist

另外需要注意，申请的二级域名的https主域名用不了，反之一样，两者不互通。
之后他会生成下面这一串密文:

image.png

出现类似下面的日志即可:

image.png

• 安装证书
  接下来我们把证书安装到服务器上，使用如下命令，注意这个命令和上面那节一样把test.oxcblog.club改成你的域名，然后/home/ubuntu/test-ssl是用来存放证书的路径，需要保证这个目录是存在的，没有的话自己创建一个:

acme.sh --installcert -d test.oxcblog.club \
               --keypath       /home/ubuntu/test-ssl/test.oxcblog.club.key  \
               --fullchainpath /home/ubuntu/test-ssl/test.oxcblog.club.key.pem \
               --reloadcmd     "sudo nginx -s reload"

执行上面的命令结束后，如果出现下图的提示则表示成功:

image.png

接着还需要生成一个不知道干嘛的文件，一样记得修改域名和路径:

openssl dhparam -out /home/ubuntu/test-ssl/test.oxcblog.club.dhparam.pem 2048

执行这个命令后需要等待一段时间，等待期间会出现如下符号都是正常的，运行完毕后他会自动退出去:

image.png

• 在nginx中配置证书
  以上步骤都完成后，我们回到之前的配置文件test.conf中，改成下面的代码:
  
  之后sudo nginx -s reload。
  重启nginx完毕后，去浏览器看看结果:
  image.png
  可知我们的https配置已经成功了。

使用nginx压缩文件

在上面的步骤中，我们的网站已经部署完成，但是存在一些问题，因为在前端部分使用webpack分包分的不够彻底，所以会导致有一个包很大的情况出现，然后首次加载的速度特别慢，下面这个570多k的文件加载花费了7s多:

image.png

这时候我们可以利用nginx对文件进行压缩，使得其变小以加快网页加载速度吗，当然也可以使用CompressionWebpackPlugin在本地压缩完毕后再上传上去，但在这里为了方便，还是使用nginx压缩的方式。

nginx压缩的选项有如下几个，有了下面这个配置表，配置起来就非常简单了:

image.png

去到test.conf中添加下面的配置:

image.png
之后重启nginx生效，并查看效果(记得勾上不用缓存):
image.png
可以发现之前570多k大小的文件缩减到了170多k，加载时间也从7s变成了1.8s，非常的有效果。
当然，你还想更快的话可以继续在webpack里分包，要不就直接把网站部署上cdn。

后记

通过这篇文章，前端项目基本就已部署成功，下一篇文章将会介绍后端的部署。