若依Vue前后端分离项目部署

1、前端Vue设置及部署

1.1、前端Vue设置

在vue.config.js文件中进行设置

1.1.1、port设置

const port = process.env.port || process.env.npm_config_port || 8088 // 端口

上面的配置用于设置一个变量port的值。‌

这段代码的逻辑是检查三个可能的端口值来源，并返回第一个找到的有效值。具体来说：

‌process.env.port：这是从环境变量中获取端口号。如果环境变量中设置了PORT，则使用该值。
‌process.env.npm_config_port：这是从npm配置中获取端口号。如果环境变量中没有设置PORT，但npm配置中有设置npm_config_port，则使用该值。
‌8088‌：如果上述两个值都没有设置，则使用默认值8088。

这种模式通常用于配置开发服务器或应用的端口号，确保在多种配置环境下都能正确设置端口，无论是通过环境变量、npm配置还是直接指定默认值。这样做的好处是提供了灵活性，允许开发者根据需要设置不同的端口号，同时也有一个默认值以防万一其他配置未设置时使用‌。

1.1.2 、devServer设置

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    hot: true,//热更新
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://27.118.240.112:8089`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

设置target的值为: http://27.118.240.112:8089,这个是后端接口地址。

1.2、前端打包部署

1.2.1、执行打包命令

npm run build:prod

1.2.2、打包后的目录结构

执行完打包命令后在vue项目结构里生成一个dist文件夹，具体结构如下：

在这里插入图片描述

通过上传工具把该dist文件夹上传到服务器指定位置。并且在nginx里对该文件夹进行地址映射配置。下文有该配置。

2、后端接口设置及部署

2.1、后端接口设置

在后端application-dev.yml文件中进行配置，设置好数据库、缓存等其他组件的ip、账号、密码。

设置后端接口端口，咱们这设置为8089。

# 环境配置
server:
    # 服务器的HTTP端口，默认为8080
    port: 8089
    servlet:
        # 应用的访问路径
        context-path: /
    tomcat:
        # tomcat的URI编码
        uri-encoding: UTF-8
        # tomcat最大线程数，默认为200
        max-threads: 800
        # Tomcat启动初始化的线程数，默认值25
        min-spare-threads: 30

2.1、后端打包部署

由于咱们这个是Maven项目，所以直接执行package命令进行打包即可。生成vue-admin.jar包文件。

在这里插入图片描述

通过上传工具把vue-admin.jar包上传到服务器指定位置，执行运行命令。如下：

java -jar vue-admin.jar &

执行完上述命令后，后端接口服务就开始运行了。

3、Nginx部署

3.1、nginx配置文件

在linux路径找到nginx的配置文件，比如：/opt/module/nginx/conf/nginx.conf。详细配置如下：

worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8088;        //监听接口
        server_name  localhost;
    	charset utf-8;
        location / {
            root   /mnt/sdc/vue/dist;  //前端项目地址
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://27.118.240.112:8089/;    //后端接口设置
		}

       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

3.2、nginx命令

配置完成后启动命令：

启动：./nginx
重启：./nginx -s load
停止：./nginx -s stop
查看：ps -ef | grep nginx

4、测试

前端和后端的项目都跑起来之后，并且确保没有问题。

以上步骤都完成后，则在浏览器中输入网址进行测试：http://27.118.240.112:8088/

在这里插入图片描述