Nginx学习 ----- 前端项目部署

前言
在前后端还没有分离的时代下，前端项目通常是放在后端项目的静态资源目录下一起部署的，那个时候还没有专门的前端程序员，或者说前端程序员不需要自己部署网站.通常前端人员只需要把网站源文件如.html文件结尾的资源包发给后端或者运维即可，剩下的事情便交给后端或运维定了.

但随着技术的发展,前后端分离开发后,前端项目也通常分离部署了，这个时候可能就需要前端人员自己部署前端项目，然而前端开发人员很少接触到服务器等知识，所有部署网站时总是捉襟见肘.

下面咱们就了解下如何将一个前端项目部署到服务器,并且外网可以访问, 前端项目就以Vue项目为例.

1. 准备工作

• 完整的Vue项目
• 一台服务器
  准备工作很简单,只需要一个打包后的项目和一台服务器即可，项目甚至可以只是一个html文件.
  2. 在服务器上安装Nginx
  Nginx是一款轻量级的Web服务器，反向代理服务器，由于它的内存占用少，启动极快，高并发能力强, 在互联网项目中广泛应用，我们的网站部署到Nginx服务器上。当然也可以选择其他web服务器，这里我们就使用主流的Nginx.

我这里的服务器是Centos系统，所以以Centos为例.
(1) 先查看服务器是否有nginx.
命令如下:

whereis nginx

如果出现如下界面, 则代表未安装nginx, 否则跳过这个步骤.

(2) 安装nginx.
命令如下:

yum install -y nginx

如果未配置yum源，可参考网上如何使用yum安装nginx, 出现如下界面则代表安装完成.

(3) 查看nginx安卓目录
命令如下:

whereis nginx

或者使用命令查看nginx版本号,出现版本号也代表安装成功.
输入命令:

nginx -v

4. 启动Nginx
(1) 启动
服务安装好nginx后，我们尝试启动它.
命令如下:

nginx

直接输入nginx即可启动服务，打开浏览器，访问服务器地址,出现如下界面则代表启动成功.

这里访问默认的是80端口，因为nginx服务就是默认的80端口,如果不能访问，大致有几种原因:

• nginx未启动
• 服务器安全组未加入80端口
• nginx配置错误
  (2) 停止
  停止nginx服务,命令如下:

nginx - s stop

此时浏览器无法访问:

(3) 重启
重启nginx服务, 一般用于修改配置文件后,命令如下:

nginx -s reload

5. 修改nginx配置
找到nginx 配置文件存放位置,命令如下:

whereis nginx

此时/etc/nginx 则是nginx配置文件存放位置，进入该文件夹:

nginx.conf 则是默认配置文件，编辑该文件:

上面界面我们基本上不用改什么,重要的是server这个对象,可以看到默认监听的是80端口，所以我们直接访问服务器ip即可，接下来我们改为9000端口:

重启nginx , 命令如下:

nginx -s reload

此时访问时则需要带上端口号（需要服务器安全组开启9000端口），访问地址：http://ip:9000：

我们还需要注意的一个地方就是root字段，该字段后面跟着的就是网站页面路径, 也就是存放的路径.
假设我们网站的存放路径为:

/home/www/dist

修改root, 结果如下:

这个时候重启nginx , 我们的网站无法访问了，因为我们没有这个文件夹.

6. 新建网站文件夹
刚刚我们设置了网站存放的文件夹路径为:

/home/www/dist

此时我们需要在服务器上新建www文件夹:

cd /home
mkdir www

我们没有新建dist文件夹，因为我们待会儿vue项目打包就会自动生成dist文件夹.
7. 打包部署vue项目
(1) 打包网站
使用vue打包命令, 生成dist文件夹:

npm run build

(2) 上传至服务器
我们可以使用ftp工具将dist文件夹上传至/home/www 目录下，当然也可以使用命令:

src -r dist/ root =@xxxxxxxx: /home/www

在我们的项目目录下用打开git命令行，将本地的dist整个文件夹复制到服务器，主要主要的scp命令 window不支持，所以使用了git命令行工具.

此时无需重启nginx , 刷新浏览器，可以看到我们的网站已经部署成功.
8. 解决刷新路由404问题
当我们切换路由后,然后在刷新页面，会出现404的情况.

这是因为我们vue项目采用了history的路由方式，至于原因主要是vue是单页面应用.
解决办法:
(1) 将路由模式改为hash;
(2) 修改nginx配置;

location / {
 try_files $uri $uri/ /index.html; ----  解决页面刷新问题.
}

修改之后reload一下nginx , 这个时候刷新浏览器就不会出现404了.