Vue+Springboot部署到云服务器教程，超详细图文解析

女爷i 2022-11-12 11:54 645阅读 0赞

# Nginx部署Vue项目 #

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

# 使用Nignx部署Vue项目步骤 #

# 1.打包Vue项目 #

npm run build

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

![image-20210323233440687][]

![image-20210323233426363][]

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

![image-20210323233545259][]

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

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

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

![image-20210323233713317][]

复制完成后，双击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 #

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

# linux环境 #

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

第一种方式参考官方地址[https://nginx.org/en/linux\_packages.html\#stable][https_nginx.org_en_linux_packages.html_stable]

第二种方式参考官方地址[https://nginx.org/en/docs/install.html][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服务器，并且使用*宝塔*管理界面的方法！详细图文过程！][ECS]

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

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

![image-20210324000301822][]

![image-20210324000312540][]

步骤就和上面一样啦。

**下面讲springboot部署。**

# SpringBoot多模块项目部署 #

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

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

# 1.确认服务架构 #

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

![image-20210323234842395][]

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

# 2.pom文件修改 #

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

![image-20210323235212406][]

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

![image-20210323235241848][]

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

## 第一个：父工程pom文件 ##

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

![image-20210323235342438][]

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

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

![image-20210323235439385][]

## 修改子模块 ##

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

<build>
            <plugins>
                <plugin>
                    
                    <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>
                    
                    <directory>src/main/resources</directory>
                    <includes>
                        <include>**/*</include>
                    </includes>
                </resource>
            </resources>
        </build>

这段配置提供了一个打包工具，并且能够把项目中的配置文件读取进来。**不然的话可能会出现就算是打包了，也无法读取配置文件的情况。**

当然，不要忘了在文件开头加上下面这段配置，告知此模块是要打包成jar包。

![image-20210323235714456][]

## 打包 ##

在每一个模块完成之后，打开idea的maven工具，一般在窗口最右侧

![image-20210323235913997][]![image-20210323235928238][]

找到我们的父工程，也就是标识了root的。打开lifecycle。先选择clean，再点击package。这样就完成了打包了。

完成后在每个子模块的target文件夹都，都有一个jar包。直接运行就可以啦。

![image-20210324000033561][]

# 云服务器操作 #

首先把上面打包好的jar上传到服务器的文件夹中。

![image-20210324000530120][]

之后来到应用市场，安装java项目一键部署。

![image-20210324000412330][]

选择springboot ，添加项目

![image-20210324000625623][]

选择你刚才上传的jar包，配置好端口即可。就会自动运行啦。

![image-20210324000646994][]

[image-20210323233440687]: /images/20221022/2b323909faea46cbae09ebb14525c7f4.png
[image-20210323233426363]: /images/20221022/aa83de0cc8424ce1b089ef66534d8895.png
[image-20210323233545259]: /images/20221022/922a680d94144e31aab164864512a3f7.png
[image-20210323233713317]: /images/20221022/858a9650e02f454db6289a22c7ab3297.png
[https_nginx.org_en_linux_packages.html_stable]: https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fnginx.org%2Fen%2Flinux_packages.html%23stable
[https_nginx.org_en_docs_install.html]: https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fnginx.org%2Fen%2Fdocs%2Finstall.html
[ECS]: https://blog.csdn.net/weixin_43314519/article/details/112851882?ops_request_misc=%7B%22request%5Fid%22%3A%22161651533116780262539501%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fblog.%22%7D&request_id=161651533116780262539501&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-2-112851882.pc_v1_rank_blog_v1&utm_term=%E5%AE%9D%E5%A1%94
[java_ECS]: https://blog.csdn.net/weixin_43314519/article/details/112851445?ops_request_misc=%7B%22request%5Fid%22%3A%22161651533116780262539501%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fblog.%22%7D&request_id=161651533116780262539501&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-112851445.pc_v1_rank_blog_v1&utm_term=%E5%AE%9D%E5%A1%94
[image-20210324000301822]: /images/20221022/ad8a62956ba840ae8f485150b380acbd.png
[image-20210324000312540]: /images/20221022/7901e991731b439cb9de21ac3e5b77ef.png
[image-20210323234842395]: /images/20221022/9bd0ca1389a341b19ec0191e3a2846a0.png
[image-20210323235212406]: /images/20221022/bca126c2504f4434bb9c9948dc285427.png
[image-20210323235241848]: /images/20221022/b710c3d80fca49e88dde96d535abfbd6.png
[image-20210323235342438]: /images/20221022/7d1ea82c69814e8ea114b5cfba5569ef.png
[image-20210323235439385]: /images/20221022/7d0b4cf382a346a18eb8736db7f393e9.png
[image-20210323235714456]: /images/20221022/c2e8ac9253e34a7fae253860e2fdc202.png
[image-20210323235913997]: https://img-blog.csdnimg.cn/img_convert/90aaf7a7d026cfef72105669aab69004.png
[image-20210323235928238]: /images/20221022/ff1b97faf2cb46049b128dd96aa347d5.png
[image-20210324000033561]: /images/20221022/5c9ec7a1de0e413ca01bb797e6c9d59e.png
[image-20210324000530120]: /images/20221022/436e451029b14285895f272f2caf835c.png
[image-20210324000412330]: /images/20221022/491a366b29524276a1a11436bb7141cd.png
[image-20210324000625623]: /images/20221022/4194d36f5269414f861889eb38c2aa8c.png
[image-20210324000646994]: /images/20221022/0d90bae70e5441f48655c11bf2880daa.png