服务器发布VueNuxt项目指南多图

共计 5562 个字符，预计需要花费 14 分钟才能阅读完成。

很多前端朋友可能不是那么了解服务器配置。今天突然翻到之前写的这篇文章，修改完善了之后分享给大家一些常见的的 Web 服务器部署项目的方式。

下面讲的每一种服务器深入进去都很复杂，在这篇文章 只是讨论一下基本的部署和使用 。更高级的知识和用法还需要各位朋友自行去探索和发现，开始阅读之前希望大家能先了解一些Linux 基础，就不至于看起来吃力了。

注 : 下面所有的例子大多基于 vue-router 的history模式下打包生成的静态文件，其他框架也都大同小异

Nginx 是一个高性能的 HTTP 和反向代理 web 服务器，在连接高并发的情况下，Nginx表现相当出色。

这里就不讲这个了吧，有需要的朋友可以看这个

为了支持 history 模式，我们要修改 nginx/conf/nginx.conf 文件

location / {
    root   html;
    try_files $uri $uri/ /index.html; # 只需要加上这么一行
    index  index.html index.htm;
}

然后把静态资源放在 html 文件夹内

然后启动 Nginx 服务器

cd usr/local/nginx/sbin
./nginx

接着访问你的服务器就行 OK 了。

nginx实现资源压缩的原理是通过 ngx_http_gzip_module 模块拦截请求，并对需要做 gzip 的类型做 gzip 压缩，该模块是默认基础的，不需要重新编译，直接开启即可。大体配置如下

# 开启和关闭 gzip 模式
gzip on|off;

#gizp 压缩起点，文件大于 1k 才进行压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用 CPU 时间
gzip_comp_level 1;

# 进行压缩的文件类型。gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

#nginx 对于静态文件的处理模块，开启后会寻找以.gz 结尾的文件，直接返回，不会占用 cpu 进行压缩，如果找不到则不进行压缩
gzip_static on|off

# 是否在 http header 中添加 Vary: Accept-Encoding，建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小，以 4k 为单位，如果文件为 7k 则申请 2 *4k 的缓冲区 
gzip_buffers 2 4k;

# 设置 gzip 压缩针对的 HTTP 协议版本
gzip_http_version 1.1;

Nginx配置虽然简单，但是它本身是非常强大的，代理，负载等等都是非常具有实用性的。

Apache是世界使用排名第一的 Web 服务器软件, 使用非常广泛。由于 VueRouter 的 hash 模式本质上和静态资源没什么区别，在 Apache 上发布又比较简单，这里就跳过了发布直接进入配置支持 History 模式

修改 Apache 默认配置

首先要重新修改 \conf\httpd.conf 文件让文件支持rewrite

找到

// 这一行需要解开注释 引入这个模块
LoadModule rewrite_module modules/mod_rewrite.so

然后新增或者修改下面得代码

# 重写文件根目录
DocumentRoot "/usr/local/apache/demo"
# 目录
<Directory "/usr/local/apache/demo">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    Options Indexes FollowSymLinks

    #
    # 修改未允许重写
    AllowOverride all

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

新增 htacces 规则

上面操作时修改服务器得默认配置让服务器支持 Rewrite，下面来创建Rewrite 规则

首先在和 index.html 同级得地方新建 .htacces 文件，具体内容可以参照 Vue-Router 官网给得例子

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

/usr/local/apache/bin/apxs -i -c -n -a mod_deflate.so

现在这种前后端分离的大环境下，一般不会有太多人用 Tomcat 作web服务器。有的企业可能会配合着 SpringMVC 来一起使用，这里也来写一下。配置起来也很简单。

配置`server.xml`

首先找到 Tomcat 服务器目录中 tomcat/conf/server.xml 文件，找到Host，修改成你想要的配置。主要是appBase，它决定了静态文件查询的基础目录。

<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true">
  <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
          prefix="localhost_access_log." suffix=".txt"
          pattern="%h %l %u %t &quot;%r&quot; %s %b" />

</Host>

只需要在发布的文件夹中新增 WEB-INF 配置文件夹中就行。如下图

WEB-INF 文件夹放在项目中那么 tomcat 会自动扫描文件夹中的 web.xml 然后添加配置。

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"metadata-complete="true">
  
  <!-- <display-name>webapp</display-name> -->
  <description>
    webapp
  </description>
  <error-page>  
    <!-- 重写 404 页面 -->
    <error-code>404</error-code>  
    <location>/index.html</location>
  </error-page>  
</web-app>

这就配置完了，可以说是贼简单了。至于怎么安装 Tomcat 服务器，大家自行解决吧????

发布 SSR 项目的时候官方推荐了两种方式 服务端渲染应用部署 和 静态应用部署 。静态应用部署的话基本上就失去了SSR 的优势，而且部署方式也和上面讲的大同小异。这里只讲服务端渲染应用部署。

服务端渲染应用部署的话不同于静态部署，我们同时要在服务器上部署上 Node 环境。

`Node 环境部署`

cd 到 /usr/local 文件夹并在这个文件夹下新建一个存放安装环境的文件夹 node 后进入 node 文件夹（名字可以随便起，这里做 demo 就用 node 了）

cd /usr/local
mkdir -p node

下载 Node 我这里采用的是最新的长期服务版本，你想安装其他的版本，可以在这里查找，还可以使用 nvm 来管理你的Node, 简单教程

wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.gz

下载完成之后解压并且为文件夹改名

# 解压到当前文件夹
tar -zxvf node-v10.13.0-linux-x64.tar.gz -C ./
# 改名
mv node-v10.13.0-linux-x64/ ./node10.13.0

建立软连接，为 node,npm 注册环境变量 (其他的npm 全局包也要这样注册)

# 软链接指向到 node npm
ln -s /usr/local/node/node10.13.0/bin/node  /usr/local/bin/node
ln -s /usr/local/node/node10.13.0/bin/npm  /usr/local/bin/npm

查看软链接建立是否成功

ls -al /usr/local/bin

显示如下就表示成功了

接着使用node -v

node -v
# 出现版本号就是安装成功了
v10.13.0

到这里为止我们的 Node 环境就安装成功了，接下来进行 nuxt 部署

`Nuxt`部署

全局安装nuxt，然后按照上面的方式建立软连接

# 安装
npm i nuxt -g
# 建立软连接
ln -s /usr/local/node/node10.13.0/bin/nuxt  /usr/local/bin/nuxt

代码部署

回到 /local 文件夹下，我们建立一个 nuxt 文件用来存放我的 nuxt 项目。然后进入 nuxt 文件夹

# 回到 local
cd ../
mkdir nuxt
cd nuxt

在本地环境中执行 nuxt build, 然后会生成一个.nuxt 文件夹。

然后修改 package.json, 为它加上新的内容，nuxt 应用会根据下面的配置自动配置服务的端口号和地址。

"config": {
  "nuxt": {
    "host": "0.0.0.0", # 通过 IPV4 访问
    "port": xxxx
  }
},

然后将项目中的 .nuxt 文件夹 static 文件夹 package.json nuxt.config.js 上传到服务器的 nuxt 文件夹中，

然后在 nuxt 文件夹中执行

# 为了方便我这这里服务器上执行了 install，正式项目不建议这么干
npm i

下载完成之后执行 nuxt start 出现下面的日志就表示成功启动了我们的 nuxt 应用

`pm2`使用

既然使用了 Node 服务，那我们最好是使用 pm2 做进程守护，至于 pm2 是什么，以及 pm2 是干什么的，这篇文章我们不过多的赘述，有兴趣可以自己看看。

首先安装pm2

npm i pm2 -g
# 建立软连接
ln -s /usr/local/node/node10.13.0/bin/pm2  /usr/local/bin/pm2

然后在 package.json 中加入 pm 启动指令或者直接像下面这样启动

# package.json
"scripts": {
    "pm2:nuxt": "pm2 start npm --name'XXX'-- run nuxt:start", # 启动名字为 xxx 的进程
    "nuxt:start": "PORT=xxxx nuxt start",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "pm2:stop:all": "pm2 stop all" # 停止所有进程
  }
# 直接启动命令
pm2 start npm --name 'XXX' -- run nuxt:start

出现这样的日志就表示成功

下面是一些常用的 pm2 命令

pm2 start 0        # 启动 id 为 0 的指定应用程序
pm2 restart 0      # 重启 id 为 0 的指定应用程序
pm2 stop 0         # 停止 id 为 0 的指定应用程序
pm2 delete 0       # 删除 id 为 0 的指定应用程序

pm2 list           # 查看当前正在运行的进程
pm2 start all      # 启动所有应用
pm2 restart all    # 重启所有应用
pm2 stop all       # 停止所有的应用程序
pm2 delete all     # 关闭并删除所有应用
pm2 logs           # 控制台显示所有日志
 
pm2 logs 0         # 控制台显示编号为 0 的日志
pm2 show 0         # 查看执行编号为 0 的进程
pm2 monit xxx      # 监控名称为 xxxx 的进程

至此，一个 Nuxt 应用就算是部署完成了。

通过 koa server.js 启动的的时候外网无法访问。用的是阿里云的服务器，安全组规则都添加了。
这个问题的具体出现原因我暂时还没找到，只是后来换了 nuxt start 外网才可以顺利访问。希望有了解到大佬能解答一下。

权限不足使用 sudo su 找不到 node npm 等命令

这个很简单，我们再重新建立一边软链接就行了

sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm

项目做完了，总要整整齐齐的发布了才有成就感对吧????，文中的服务器种类有点多，不过多学点也不吃亏????，学会了配置服务器，再配合上 Node 的自动化脚本发布, 发布体验简直丝滑。

原文地址如果觉得有用得话给个⭐吧

写在前面

Nginx 服务器

Nginx 安装

配置修改

GZip 支持

Apache 服务器

基础配置

Apache 开启 Gzip 压缩

Tomcat 服务器部署

配置`server.xml`

配置支持 History 模式

Nuxt 项目（服务端渲染）

`Node 环境部署`

`Nuxt`部署

`pm2`使用

出现过的问题

总结

Just My Socks（注册教程内含优惠码）

服务器发布VueNuxt项目指南多图

写在前面

Nginx 服务器

Nginx 安装

配置修改

GZip 支持

Apache 服务器

基础配置

Apache 开启 Gzip 压缩

Tomcat 服务器部署

配置server.xml

配置支持 History 模式

Nuxt 项目（服务端渲染）

Node 环境部署

Nuxt部署

pm2使用

出现过的问题

总结

Just My Socks（注册教程 内含优惠码）

配置`server.xml`

`Node 环境部署`

`Nuxt`部署

`pm2`使用

Just My Socks（注册教程内含优惠码）