服务器发布Vue/Nuxt项目指南(多图)

时间  2019-12-05
标签 服务器 发布 vue nuxt 项目 指南 繁體版
原文   原文链接

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

写在前面

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

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

Nginx服务器

Nginx 是一个高性能的HTTP和反向代理web服务器，在链接高并发的状况下，Nginx表现至关出色。前端

Nginx安装

这里就不讲这个了吧， 有须要的朋友能够看这个vue

配置修改

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

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

![nginx](./images/nginx.png 'nginx')

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

![nginx_html](./images/nginx_html.png 'nginx_html')

而后启动Nginx服务器linux

cd usr/local/nginx/sbin
./nginx

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

GZip支持

nginx实现资源压缩的原理是经过ngx_http_gzip_module模块拦截请求，并对须要作gzip的类型作gzip压缩，该模块是默认基础的，不须要从新编译，直接开启便可。大致配置以下git

#开启和关闭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服务器

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

基础配置

  1. 修改Apache默认配置

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

![引入模块](apacheconfig2.jpg '引入模块')

找到

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

而后新增或者修改下面得代码
![修改重写支持](apacheconfig1.jpg '修改重写支持')

# 重写文件根目录
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>
  1. 新增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>

![.htacces文件](htac.png '.htacces文件')

Apache开启Gzip压缩

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

Tomcat服务器部署

如今这种先后端分离的大环境下，通常不会有太多人用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>

![tomcatxml](./images/tomcat_xml.png 'tomcatxml')

配置支持History模式

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

![tomcat中配置](tomcat.png 'tomcat中文件')

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

![tomcat中配置](webxml.png '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服务器，你们自行解决吧😁

Nuxt项目（服务端渲染）

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

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

Node环境部署

  1. cd到/usr/local文件夹并在这个文件夹下新建一个存放安装环境的文件夹node后进入node文件夹（名字能够随便起，这里作demo就用node了）
cd /usr/local
mkdir -p node
  1. 下载Node我这里采用的是最新的长期服务版本，你想安装其余的版本，能够在这里查找，还可使用nvm来管理你的Node,简单教程 
wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.gz
  1. 下载完成以后解压而且为文件夹更名
# 解压到当前文件夹
tar -zxvf node-v10.13.0-linux-x64.tar.gz -C ./
# 更名
mv node-v10.13.0-linux-x64/ ./node10.13.0
  1. 创建软链接，为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
  1. 查看软连接创建是否成功
ls -al /usr/local/bin

显示以下就表示成功了

![node创建连接](./images/nodeinstall1.png 'node创建连接')
接着使用node -v

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

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

Nuxt部署

  1. 全局安装nuxt，而后按照上面的方式创建软链接
# 安装
npm i nuxt -g
# 创建软链接
ln -s /usr/local/node/node10.13.0/bin/nuxt  /usr/local/bin/nuxt
  1. 代码部署

回到/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应用

![成功启动](./images/nuxtstart.png '成功启动')

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

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

![成功启动](./images/pm2.png '成功启动')

下面是一些经常使用的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应用就算是部署完成了。

出现过的问题

  1. 经过koa server.js启动的的时候外网没法访问。用的是阿里云的服务器，安全组规则都添加了。

    这个问题的具体出现缘由我暂时还没找到，只是后来换了nuxt start外网才能够顺利访问。但愿有了解到大佬能解答一下。

  2. 权限不足使用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的自动化脚本发布, 发布体验简直丝滑。

原文地址 若是以为有用得话给个⭐吧

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程