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

我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用Sass和Antd 前端: 开发体验优化 前端: 搭建路由和状态管理 前端: 支持Axios 前端: 打包与环境变量设置 前端: 团队代码规范 后端: 项目初始化和使用Koa相关 后端: 使用TypeORM和MySQL 部署: 使用nginx部署前端项目 部署: 后端部署 部署: 使用jenkins自动化部署 前言 在前面的十篇文章中,我们已经可以在本地进行跑起前端和后端项目,一般来说前端项目在完成后,都会进行打包工作,之后部署在服务器上的就是打包出来的静态文件,所以在这篇文章中,将会介绍前端项目如何部署上服务器,内容如下: 将前端项目放上服务器中 安装并使用Nginx 使用免费https证书 使用nginx压缩文件 注意: 该文章的实行步骤建立在之前前端搭建文章的基础上 想要实践该文章之前,首先需要购买服务器(最好使用重装系统后的服务器)以及域名(最好已经备案完毕),另外,我本人使用的服务器是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 绑定域名 这一步开始前提是已经拥有域名最好已经备案(大概需要花费一星期到半个月时间)过的。 然后去到服务器的管理后台中(我的是腾讯云,其他的厂商操作大同小异),点开云解析页面,点击添加解析并填入你的域名: image.png 解析状态为正常解析后,点击域名进入记录添加界面: image.png 解析界面中,@和www一般来说是第一次添加域名记录时候产生的,是针对于主域名的记录。我们不用这个记录,另外再添加一个二级域名的记录(oxc.com为主域名的话,test.oxc.com就是二级域名)。 image.png image.png 域名添加记录后,我们回到服务器中,编辑刚才的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。 后记 通过这篇文章,前端项目基本就已部署成功,下一篇文章将会介绍后端的部署。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):