Java 代码编程 前端页面

宝塔部署SpringBoot、Vue项目到公网服务器，配置域名访问

By 黯然gg #Java, #SpringBoot, #Vue, #部署

宝塔环境

宝塔Linux测试版 7.8.26，正式版还没有集成SpringBoot部署

打包SpringBoot

我是多模块单启动项目所以要小配置一下，除了项目根目录的pom.xml文件和启动类模块里的pom.xml文件需要留着build配置，其他模块的pom.xml里的build都删掉

先根目录的pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>cn.vxpay</groupId>
    <artifactId>AnRanUtils</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <packaging>pom</packaging>

    <name>AnRanUtils</name>

    <description>
        黯然工具箱
    </description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <!-- 子模块 -->
    <modules>
        <module>ar-common</module>
        <module>ar-qrcode</module>
        <module>ar-admin</module>
    </modules>


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.19.1</version>
                <configuration>
                    <skipTests>true</skipTests>    <!--默认关掉单元测试 -->
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

 

 

然后是启动类的模块，我的启动模块在admin里，所以再admin的pom.xml里配置一下build，指定一下全局唯一入口，配置把依赖其他两个模块都打包进jar里

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>cn.vxpay</groupId>
        <artifactId>AnRanUtils</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <groupId>cn.vxpay</groupId>
    <artifactId>ar-admin</artifactId>
    <name>ar-admin</name>
    <version>0.0.1-SNAPSHOT</version>
    <description>
        web启动
    </description>
    <dependencies>
        <!-- spring-boot-devtools -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional> <!-- 表示依赖不会传递 -->
        </dependency>
        <!-- 公共模块 -->
        <dependency>
            <groupId>cn.vxpay</groupId>
            <artifactId>ar-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <!-- 二维码模块 -->
        <dependency>
            <groupId>cn.vxpay</groupId>
            <artifactId>ar-qrcode</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.1.1.RELEASE</version>
                <configuration>
                    <fork>true</fork> <!-- 如果没有该配置，devtools不会生效 -->
                    <!-- 指定该Main Class为全局的唯一入口 -->
                    <mainClass>cn.vxpay.ArAdminApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <!-- 可以把依赖的包都打包到生成的Jar包中 -->
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

 

 

其他的两个模块不需要有build这个配置，删掉就好了。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>cn.vxpay</groupId>
        <artifactId>AnRanUtils</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <groupId>cn.vxpay</groupId>
    <artifactId>ar-common</artifactId>
    <name>ar-common</name>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <description>
        公共模块
    </description>

    <dependencies>
        <!-- fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
        <!-- hutool -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.6.7</version>
        </dependency>
    </dependencies>
</project>

 

 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>cn.vxpay</groupId>
        <artifactId>AnRanUtils</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <groupId>cn.vxpay</groupId>
    <artifactId>ar-qrcode</artifactId>
    <name>ar-qrcode</name>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <description>
        二维码模块
    </description>
    <dependencies>
        <!-- 公共模块 -->
        <dependency>
            <groupId>cn.vxpay</groupId>
            <artifactId>ar-common</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <!-- 二维码 -->
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>core</artifactId>
            <version>3.4.0</version>
        </dependency>
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>javase</artifactId>
            <version>3.4.0</version>
        </dependency>
        <!--常用工具类 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.9</version>
        </dependency>
    </dependencies>

</project>

 

 

然后打包，package

打包后的文件会在admin模块的那个里面

打包好之后打包vue

打包Vue

打开Vue项目，输入npm run build 就可以打包了

打包好之后会有一个dist文件夹，这个就是打包好的vue

部署Vue

宝塔添加网站，域名就是你要用使用的

然后把SpringBoot打包的jar包，和Vue打包的dist文件夹丢进这个目录里

设置这个域名访问Vue前端，网站目录设置这个dist文件夹，这就部署好前端了

部署SpringBoot

部署SpringBoot的话也是很简单，添加java项目，然后jar路径选到上传的那个jar文件，然后端口的话我设置成8000(多少都可以，默认的也行)，然后提交就行

再点设置，域名管理，添加个域名，然后点外网映射，开启外网映射就可以了

这样也就部署好了后端了

访问前端

浏览器访问看看：

报错404，没有这个后端的接口，请求不到，原因是nginx没有配置反向代理

上篇文章有写配置跨域那个，就是下图这个，前端每个请求都加了一个/api的路径，现在来配置一下nginx

配置Nginx反向代理

配置nginx加一段代码，里面的两个api就是用来匹配前端请求的api前缀，proxy_pass后面的就是SpringBoot项目的域名

    location /api {
      rewrite ^.+api/?(.*)$ /$1 break;
      proxy_pass http://arapi.a0w.cn/;
    }

 

然后点保存就可以了，再通过域名访问一下前端就发现可以用了，点方格跳转也是可以的，然后里面的表单提交也是没问题的。

完成

 

 

By 黯然gg

Related Post

Java

修改ZooKeeper Kafka底层offset值

黯然gg
Java

上传jar包到本地maven仓

黯然gg
Java

maven 删除.lastUpdated文件脚本

黯然gg

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

推荐文章

Java

修改ZooKeeper Kafka底层offset值

Linux

清理Hadoop集群磁盘

Linux 软件使用

密码保护：微信机器人说明

软件使用

MacOS使用指令