Nginx快速部署前端代码教程

一、前言

一般开发采用前后端分离，前端代码在本地调试没有问题后，这时候需要将其部署到服务器上，这样就可以随时随地使用网址（或域名，域名得备案申请）来进入网站了，我们来使用Nginx来部署前端代码。
前提：

1. 已经拿到完整的前端代码包
2. 已经在服务器上安装好nginx代理服务器

二、过程

1. 本地前端代码上传到服务器上，使用命令：
   sudo scp 本地目录 主机名@host_ip:服务器目录 并提示登录密码，然后输入登录密码
   例如：sudo scp ubuntu.sh ubuntu@137.*.*.*:chatbot/
   
   注意：如果报错scp: /ubuntu.zip: Permission denied，则需要更改ubuntu.sh的文件权限：
   chmod 777 ubuntu.zip

2. 登录服务器，将上传的前端代码包解码到指定目录 ，通常放在/var/www/下，我们需要使用unzip ubuntu.zip解压前端代码包得到ubuntu代码包，并使用命令sudo mv ubuntu /var/www/移动到指定目录/var/www/

3. 使用命令cd /etc/nginx进到nginx中，然后新建文件目录sudo mkdir conf.d，如果conf.d已存在，则不需要新建目录

4. .打开配置文件nginx.conf，在http模块中加上include /etc/nginx/conf.d/*.conf;这样就可以按需求目录conf.d下新建配置文件*.conf来配置单独的文件

5. 去到目录conf.d下新建配置文件sudo vim chat.conf，并编写如下代码：
   

server{
         listen 8081;  #监听端口
         server_name chatbot; #域名，用于代替将要访问的主机ip
         #root /var/www/dist;  #将要访问的网站目录
  
         location / {
				root /var/www/dist;  # 项目代码路径
				index index.html index.htm;  # 入口
         }
  
}

注意：dist是们的前端代码包，里面有一个index.html文件就是打开网站的web文件
6. 保存退出，使用命令sudo nginx -s reload对nginx进行重启
7. 最后打开浏览器，在地址栏输入：http://137.*.*.*:8081按回车就可以跳转到登录网站页面了

三、总结

这篇博文是一个nginx代理服务器的简单、快速部署的教程，nginx还有很多地方可以设置，包括反向代理、负载均衡等，都在nginx.conf中进行设置，我们后期有需求的时候再进行深入学习！