Nginx部署Vue项目

很多小伙伴在做完Vue项目之后，想要部署到服务器上自己运行试试。其实使用Nginx就可以轻松的做到，并且实现请求转发等功能。下面来看看使用步骤吧。

使用Nignx部署Vue项目步骤

1.打包Vue项目

npm run build

首先使用打包命令打包Vue项目，之后得到一个dist文件夹。这里面存放的是已经打包好的静态资源文件。

注意：这里不同的项目打包的命令可能不一样，具体配置可以在index.js里查看

不同的项目结构不一样哦。我使用的是vue-element-admin框架。具体打包方法可以查看框架的相关文档哦。

2.复制dist文件夹到Vue默认目录

安装好Nginx，找到安装根目录。将dist目录里的文件复制到html中。这是默认的nginx根目录，如果这样做的话你不用修改配置文件就可以直接运行。

复制完成后，双击nginx.exe运行nginx就可以运行啦。

3.高级配置

通常情况下ngxin是安装到单独的服务器上，因此一般是把vue打包后的dist仍到服务上的具体位置，然后修改nginx.conf的root路径来指向我们的dist。

如果你想根据自己的需求来配置nginx，或者想部署多个项目的话。你需要通过修改配置文件来完成。

这里放一个我自己的配置。具体可以参考注释。

server {
    # 需要被监听的端口号，前提是此端口号没有被占用，否则在重启 Nginx 时会报错
    listen       8888;
    # 服务名称，无所谓
    server_name  localhost;

    # 上述端口指向的根目录
    root /opt/asing1elife/teamnote;
    # 项目根目录中指向项目首页
    index index.html;

    client_max_body_size 20m; 
    client_body_buffer_size 128k;

    # 根请求会指向的页面
    location / {
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      try_files $uri $uri/ @router;
      # 请求指向的首页
      index index.html;
    }

    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }

    # 关键步骤，这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
    # 这里使用 /teamnote/api/ 而不是 /teamnote/ ，是因为前端项目本身的访问链接就是 http:192.168.7.8:8888/teamnote/
    # 为了防止在访问页面时请求就被 Nginx 代理转发，这里需要更具体的配置，才能和前端访问请求区分开
    location /teamnote/api/ {
          # 后端的真实接口
          proxy_pass http://192.168.7.8:2592/teamnote/api/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}

重新启动 Nginx

使用 nginx -s reload 可以重新加载 Nginx 的配置文件，但如果配置文件有错，不一定会抛出异常
使用 nginx -s stop 先停止 Nginx 服务，再使用 nginx 尝试启动 Nginx 服务，如果配置文件有异常，则会抛出异常告知启动失败

linux环境

通常情况下很少使用windows来作为nginx的服务器，一般使用linux。对于linux安装nginx有两种方式，一种是使用官方已经编译好的包来安装，一种是使用源码构建安装。

第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable

第二种方式参考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，这种实际上就是下一个tar.gz包仍到linux服务去自己编译。

在linux服务上和window环境上使用nginx部署vue项目并没有太大差异，把构建好的vue项目dist上传到linux服务上，通用修改nginx服务器中的root来指向dist就ok了，然后使用

# centos 7
systemctl restart nginx.service
# centos 6
service nginx restart

或者是平滑重启

service nginx reload

当然，我更推荐宝塔面板，操作简介方便！

如果你不会安装，请看这两篇文章：

免费获取ECS服务器，并且使用宝塔管理界面的方法！详细图文过程！

使用宝塔面板将java项目部署到云服务器ECS！超详细图文步骤！

拥有宝塔面板后，安装nginx。

步骤就和上面一样啦。

下面讲springboot部署。

SpringBoot多模块项目部署

现在的项目开发大多数采取的都是微服务的方法。因此，SpringBoot项目多模块部署是个难题。

下面提供其中的一种部署的方法。比较方便的能够部署在云服务中。

1.确认服务架构

下图是我的项目的一个服务架构

在这个项目里，包含了一个父工程，众多子模块和一个工具模块。其中子模块里每一个都有启动类。而工具模块没有。因此这三者的pom文件不一样。我们根据需要修改，然后用idea的打包工具一键打包就好了。

2.pom文件修改

首先，你需要确定你创建子模块是通过在父工程右键新建而建立的。

并且在创建的时候选择了正确的父工程。

这样可以帮我们剩下修改pom文件的很多精力。我们只需要修改几个关键的地方即可。

第一个：父工程pom文件

我们首先确定是否有子模块依赖在里面，有的话则创建没有问题。

之后我们只需要在合适的位置加上

<packaging>pom</packaging>

这句配置即可，确保父工程是用pom方式打包的。

修改子模块

之后，我们去修改每一个有启动类的子模块。加入下面这段配置：

  <!-- 项目打包时会将java目录中的*.xml文件也进行打包 -->
    <build>
        <plugins>
            <plugin>
                <!--该插件主要用途：构建可执行的JAR -->
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>

            <!--设置自己目录下的配置文件-->
            <resource>
                <!--下方resources的文件夹名字要和自己项目的文件夹名确认一致才行 很多人就是忽略了名字不一致 -->
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*</include>
                </includes>
            </resource>
        </resources>
    </build>