Docker部署前后端分离项目

Salierilym
528 阅读3分钟

网上很容易找到如何将前后端分离项目部署到服务器的方法介绍，为了顺便学习下Docker，在这里记录下如何在Docker上快速部署前后端分离项目。 以RuoYi-Vue为例。

前端部署

1.前端打包

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。 将打包好的dist文件夹放入之前映射好的服务器本地文件路径/mydockerdata/nginx/www/下。 注1：如果需要自定义构建，比如指定 dist 目录等，则需要通过 config (opens new window)的 outputDir 进行配置； 注2：部署时改变页面js 和 css 静态引入路径 ,只需修改 vue.config.js 文件资源路径即可。

2.Nginx配置

修改nginx.conf，并重启容器。

    server {
        listen       80; # 监听的端口号
        server_name  47.100.189.194; # 服务器的IP地址

        location / {
            root   /usr/share/nginx/html/dist;
            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://47.100.189.194:8080/;
        }  #映射访问路径
    }

后端部署

1.数据库迁移

迁移方法： 采用MySQL Workbench提供的“Migration Wizard”方法可以将本地的数据库完整迁移到服务器的MySQL容器中，比网上找的各种备份-还原的方法简介好用多了。并且还支持将其他非MySQL关系型数据库迁移到目标MySQL数据库中。 image.png ++数据库这里遇到了一个坑，就是按照官网的说法，Mysql8.0一旦你在初始化的时候没有给与相应的值，则默认lower_case_table_names=0。后续如果你想要在my.cnf中修改此项，Mysql8.0是不允许两者不一致的情况发生（5.7的版本是可以的，所以5.7的版本依然可以直接修改my.cnf）。所以事后修改这个配置是不允许的，我进行修改后，MySQL容器直接运行不了。所有只能之前在MySQL容器初始化的时候就指定，即在最后加上-d mysql:8.0 --lower-case-table-names=1++

2.后端必要的修改

编辑resources目录下的yml配置文件。

# application-druid.yml
url: jdbc:mysql://47.100.189.194:3307/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: yourpassword

# application.yml
# 开发环境配置
server:
  # 服务器的HTTP端口，默认为8080
  port: 8080

  # redis 配置
 redis:
  # IP地址
  host: 
  # 端口，默认为6379
  port: 
  # 密码
  password:

# logback.xml，可修改日志存放路径，在每个${log.pattern}下面加上UTF-8。
    <!-- 日志存放路径 -->
<property name="log.path" value="/home/lym/logs" />

<encoder>
	<pattern>${log.pattern}</pattern>
        <charset>UTF-8</charset>
</encoder>

因为Spring Boot内置了Tomcat，如果是打算用war包部署，则还需要在lym-framework的pom.xml中移除Tomcat的依赖，jar包则不需要。

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

之后在bin目录下依次运行clean.bat、package.bat。会在项目下生成 target文件夹包含war或jar。 image.png 并将打包好的war包放入tomcat服务器webapps内。 image.png 由于Tomcat默认是访问的Root根目录，所以需要修改Tomcat下的server.xml，将根目录映射到网页实际存放的目录，通过修改Context的path属性来指定url最终访问的是哪个应用，而docBase指明该应用的具体物理地址。

<Context docBase="/usr/local/tomcat/webapps/lym-admin" path="/" reloadable="true" source=""/>

之后访问8080端口，发现不再显示Tomcat官网主页，而是显示一串json：{"msg":"请求访问：/，认证失败，无法访问系统资源","code":401}，说明成功访问到项目的地址。

avatar
文章
阅读
粉丝