从零搭建项目(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 -vnpm -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。

后记

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

推荐阅读更多精彩内容