发布spring cloud + vue项目

时间:2023-03-09 18:31:41
发布spring cloud + vue项目

服务器部署结构

1、服务器访问直接访问NGINX

2、静态资源访问, nginx读取本地文件夹

3、API接口路由, nginx把以api开头的访问都路由到业务逻辑服务器。

nginx配置

   client_max_body_size 100m; # 上传文件大小限制
server {
listen 80;
server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; # 静态资源位置 (这里的dist文件夹,即vue打包的默认文件名)
location / {
root c:/nginx/dist;
index index.html index.htm;
} # 业务逻辑路由到真实服务器
location /api {
proxy_pass http://192.168.0.161:40001;
}
# .....
}

启动

cd /usr/sbin

./nginx

重启

更改配置重启nginx

kill -HUP 主进程号或进程号文件路径

或者使用

cd /usr/sbin

./nginx -s reload

Vue资源打包

axios 跨域访问问题

跨域问题分两种情况, 分别是开发者模式与生产环境跨域访问。

所谓开发者模式是指, 直接用npm run dev 运行vue程序, 包含了各种调试信息。

生产者环境是指, 通过npm run build把vue项目程序进行打包, 生成一个干净的发布内容。

1、在进行跨域访问时, 我们用axios进行访问服务器如下

this.$axios.post(process.env.API_HOST + '/api/app/download', {id : id}).then((result) => {
console.log(result)
}).catch((err) => {
console.log(err);
});

这里POST的路径为process.env.API_HOST + '/api/app/download'的绝对路径。

2、在开发者模型式下的配置

在config/dev.env.js文件中,添加如下内容

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'""'
})

在config/index.js文件中,添加路由表proxyTable

module.exports = {
dev: {
// .....这里省略
proxyTable: {
'/api': {
target: "http://localhost:40001", // 这里需要访问的跨域服务器地址
changeOrigin: true
}
},
//....这里省略
}
}

这样开者模式下的配置就完成了

3、生产环境下的配置

在config/prod.env.js文件中,添加如下内容

module.exports = {
NODE_ENV: '"production"',
API_HOST:' "http://localhost" '
}

API_HOST就是指定需要跨域访问的服务器。

然后,在config/index.js文件中, 添加和编辑打包配置信息, 找到build字段,添加如下内容

  build: {
env: require('./prod.env'),
assetsPublicPath: './',
productionSourceMap: false,
...
}

这样就可以使用npm run build进行打包vue项目。默认输出到../dist这个位置。 前面的nginx静态资就是这个文件夹内容。

Spring Cloud打包

1、打包 jar文件包

在pom.xml文件中,指定打包类型, 即添加jar

    <groupId>com.example</groupId>
<artifactId>svc-gateway</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

执行命令mvn build打包, 生产包,如上配置生成svc-gateway-0.0.1-SNAPSHOT.jar

添加配置,取消tomcat的依赖, 告诉pom.xml配置已经有了。

在pom.xml文件内容中添加以下内容

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

注意

有时打包找到不依赖module, 此时需要把根项目clean + install.

2、运行程序

java -jar svc-gateway-0.0.1-SNAPSHOT.jar --server.port=40001

更换发布端口为90

在config/prod.env.js文件中,添加如下内容

module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://localhost:90"'
}

nginx配置端口

   server {
listen 90;

然后,通过npm run build来打包vue重新发布即可。

总结

访问请来了, 如果是http://localhost/api/xxxxx,就会被nginx路由到配置poxyPass对应的位置;否则会直接指定的location下面打找文件。