前段打包后上线流程

在整个项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。

一、使用Xshell连接云服务器

我使用的是Xshell 7 + Xftp 7。

Xshell官网： https://www.xshell.com/zh/xshell/ ；

这是我放在百度网盘的压缩包
链接：https://pan.baidu.com/s/1XrAE0R0LJqEClEBX655jMg
提取码：1024

Xshell介绍

Xshell 是一个强大的安全终端模拟软件，它支持SSH1, SSH2, 以及Microsoft Windows平台的TELNET 协议。Xshell 通过互联网到远程主机的安全连接以及它创新性的设计和特色帮助用户在复杂的网络环境中享受他们的工作。

Xshell可以在Windows界面下用来访问远端不同系统下的服务器，从而比较好的达到远程的控制终端目的。除此之外，其还有丰富的外观以及样式选择。

1.双击Xshell，打开后点击新建

若点击的【确定】，可在左侧所有会话中双击继续连接；
若需要修改其中的内容，可将鼠标移至对应的会话的会话上点击【鼠标右键】后点击【属性】编辑；

2.点击【连接】后会弹出下一个弹窗

3.依次输入账号密码后连接成功

二、使用Xftp进入远程主机

连接成功后点击这个绿色的图标（Xftp）。没下载Xftp的话会弹出下载窗口，也可自行下载。

1.进入远程主机成功

左边桌面是我本机的桌面，右边是远程主机，点击上一级可返回根目录。

2.创建项目文件夹project（文件夹名称可根据实际情况更改）。

3.双击进入nginx文件夹。没有可以在 nginx官网下载，建议使用稳定版。

html文件夹就是存放静态资源（前端打包好的dist文件）的地方。

将打包好的dist文件夹发放入html。可以看见我将dist改名成project了，这个依据需求更改。

静态资源存放好后还需要去nginx-1.13.7文件夹内更改一些配置。

4.配置nginx

进入nginx-1.13.7后找到conf文件夹后双击进入

找到nginx.conf文件，点击鼠标右键【用记事本编辑】（双击鼠标左键是下载！！！）

打开后找到关键字【server】，每一个server对应一个服务。

需要新上线一个项目，复制【server】对象，更改访问端口（监听端口）、项目名称、项目存放路径等即可；
监听端口不可重复；
在nginx.conf的注释符号为#；

以下是nginx.conf文件格式：

... #全局块

events { #events块
...
}

http #http块
{
... #http全局块
server #server块
{
... #server全局块
location [PATTERN] #location块
{
...
}
location [PATTERN]
{
...
}
}

    server {
listen 8082;
server_name project;
index index.html index.htm index.php;
root /project/nginx/html/project;

#error_page 404 /404.html;
#include enable-php.conf;
location / {
# 启动项目地址
root /project/nginx/html/project;
index index.html index.htm;
try_files $uri $uri/ @router;
# 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
}

   location @router {
rewrite ^.*$ /index.html last;
}

location ~* ^.+\.(gif|jpg|pdf|jpeg|png|mp4|js|css|html|txt|ttf|zip|7z|rar)$ {
       root /project/nginx/html/project;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
expires 30d;
}

location ~ .*\.(js|css)?$ {
expires 12h;
}

location ~ /\. {
deny all;
}

}

... #http全局块
}

全局块：配置影响nginx全局的指令。一般有运行nginx服务器的用户组，nginx进程pid存放路径，日志存放路径，配置文件引入，允许生成worker process数等。
events块：配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。
http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type定义，日志自定义，是否使用sendfile传输文件，连接超时时间，单连接请求数等。
server块：配置虚拟主机的相关参数，一个http中可以有多个server。
location块：配置请求的路由，以及各种页面的处理情况。

5.到此项目圆满上线成功，可以到浏览器上访问一下：http(s)://远程主机IP:【server】里配置的监听端口。

三、Xshell常用命令

1.到指定目录下

cd xxx

2.上传本地文件到服务器上

rz
// 在弹窗中选择要上传的文件

3.根据指定文件名查询路径

find / -name nginx
// /为根目录 可指定在某个路径下查询文件
// 查询之前需求先【cd /】进入根目录

4.删除文件

//删除指定文件并提示是否确认删除
rm -i filename
//直接删除文件
rm filename  或  rm -f filename
//删除文件夹并提示每个文件是否要删除
rm -ir filedir
//直接删除文件夹
rm -rf filedir

四、问题总结

Q:在Xftp上操作完后，发现还是无法进入项目

A:在操作文件【nginx.conf】后需要重启nginx

1.Nginx重启命令

service nginx restart

或者

systemctl restart nginx

2.查询服务状态

service nginx status

或者

systemctl status nginx

Q:项目部署后刷新报404

因项目需求把vue router 的mode改成了history，结果跳转页面没问题，刷新页面的时候报404错误。

A:解决方案如下

方法一：vue router 的mode改成hash，但项目路径上会出现#

方法二：修改文件【nginx.conf】

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

警告：此时服务器不再返回404错误页面。可以修改前端路由配置，当没有匹配到路由的时候返回 404，从而实现 fallback。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: () => import('xxx')}
  ]
})