web前后端部署方案

目标：部署一个基于vue.js的后台管理系统flash-vue-admin以及为后台管理系统提供服务的后端。项目地址为：项目地址：https://github.com/enilu/web-flash.git

准备工作

克隆仓库代码，将flash-vue-h5目录，flash-generator目录，flash-workflow目录删除；将pom中对flash-generator，flash-workflow相关依赖删除
更改application.yml以及application-prod.yml文件

# 激活生产环境的配置文件
spring:
  profiles:
    active: prod
# 修改数据库连接信息

# 将工作流相关的配置注释掉
#  activiti:
#    check-process-definitions: false
#    database-schema-update: update
#    history-level: full
#    db-history-used: true

将ApiApplication.java类中如下内容注释掉

//import org.springframework.boot.actuate.autoconfigure.security.servlet.ManagementWebSecurityAutoConfiguration;

@SpringBootApplication(
        //集成activit后，默认引入了springSecurity，这里需要通过下面配置去掉SpringSecurity
        exclude = {
                SecurityAutoConfiguration.class,
//                ManagementWebSecurityAutoConfiguration.class
        }
)

打包

后台管理系统：
1. 安装依赖，安装依赖之前需要有node.js的环境
```
npm install --registry=https://registry.npmmirror.com
```
1. 打包，打包成功后将生成dist目录，将dist目录的内容拷贝至/usr/local/nginx/font目录下
```
npm run build:prod
```

后端API服务：

将flash-api目录下的pom.xml中的打包方式更改为jar

<packaging>jar</packaging>

将flash-api目录下的pom.xml中插件配置修改为如下：

<!--注释掉以war形式运行 配置开始这一段配置-->
<!--将以jar包形式单独部署 配置开始这一段配置打开，配置如下-->
<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <version>2.3.0.RELEASE</version>
    <configuration>
        <mainClass>cn.enilu.flash.api.ApiApplication</mainClass>
        <layout>ZIP</layout>
        <finalName>flash-api</finalName>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>repackage</goal>
            </goals>
        </execution>
    </executions>
</plugin>

然后使用maven中的package进行打包，打包成功后会在flash-api/target目录下生成flash-api-1.0.jar

部署方案1：使用nginx作为代理

安装nginx，修改nginx配置文件如下所示：

# 工作进程运行用户
user  root;
# 工作进程的数目
worker_processes  4;

# 配置全局错误日志及类型，默认输出日志类型为error
error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

# nginx运行的进程信息
pid        logs/nginx.pid;


events {
	# 每个工作进程的连接上限
    worker_connections  1024;
}

http {
	# nginx支持的媒体类型
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
	
	# 配置access.log日志及存放路径，并使用上面定义的main日志格式
    access_log  logs/access.log  main;
	
	# 开启高效文件传输模式
    sendfile        on;
	# 防止网络阻塞
    tcp_nopush     on;

	# 长连接超时时间，单位是秒
    #keepalive_timeout  0;
    keepalive_timeout  65;
	
	# 开启gzip压缩输出
    #gzip  on;
	
	# 配置虚拟主机
    server {
		# 配置监听端口
        listen   9528    ;
		# 配置服务名
        server_name  192.168.0.109;
		# 配置字符集
        #charset koi8-r;
		# 配置本虚拟主机的访问日志
        access_log  logs/9528.access.log  main;
		
		# 默认匹配斜杠/的请求，当访问路径中有斜杠/，会被该location匹配到并进行处理
        location / {
			# root是配置服务器的网站根目录位置，默认为nginx安装主目录下的html目录
            root   /usr/local/nginx/font;
			# 配置首页文件的名称
            index  index.html index.htm;
			# 解决vue前端项目刷新，nginx报错404的问题
			try_files $uri $uri/ /index.html;
        }
		
		# 前端的访问地址http://192.168.0.109/prod-api/将会被nginx代理到http://192.168.0.109:8082/
		# 因此对于请求http://192.168.0.109:9528/prod-api/account/info将被nginx代理到http://192.168.0.109:8082/account/info
		
		location /prod-api/{
			proxy_ignore_client_abort on;
			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_read_timeout 600s;
			# 后台服务的端口
			proxy_pass      http://192.168.0.109:8082/; 
		}
		# 配置404页面
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
		# 精确匹配
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # 配置HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

然后以指定nginx的配置文件来启动nginx，例如：./nginx -c /usr/local/nginx/conf/nginx.conf
安装Java开发环境，配置好环境变量，然后运行jar包：

java -jar xxx.jar

测试：浏览器中输入地址http://192.168.0.109:9528/进行测试

posted on 2023-12-13 22:20 scrutiny-span 阅读(24) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

web前后端部署方案

准备工作

打包

部署方案1：使用nginx作为代理