使用docker部署前后端

1.首先，已经默认拥有了一个拥有docker和docker compose的linux服务器。
本篇文章部署的是SpringBoot+Vue前后端分离项目，用了docker compose，但不多。
2.数据库
使用命令（表示拉取最新的MySQL)

docker pull mysql:latest

如果想指定版本，将冒号后面换成版本号即可，如：

docker pull mysql:5.7

这样就能得到一个mysql镜像。
使用以下命令查看已有的镜像。

docker images

使用以下命令创建并启动mysql容器（-d表示在后台运行，–name，定义容器名称，-p端口号，-e数据库密码，mysql:5.7镜像名称和版本号)

docker run -d --name mysql-test -p 3306:3306 -e MYSQL_ROOT_PASSWORD=mysql_password mysql:5.7

这样就成功启动了mysql
如果有redis，部署方式与mysql相同。

3.部署后端
打包后端代码，打包前需要注意，将properties或者yml配置文件中的数据库连接属性，修改为和docker服务器相同的ip、登录密码（如果有redis，也需要修改相应的ip地址）
准备一个Dockerfile文件，这里有一份简单模板（如果是war包，将xxx.jar改为xxx.war即可）

FROM openjdk:17#jdk版本
VOLUME /home/test#当前所在目录
ADD wcjt.jar wcjt.jar #目录中的文件
EXPOSE 8082  #暴露的端口
ENTRYPOINT ["java","-jar","/wcjt.jar"] #执行的命令

将后端代码包，Dockerfile文件放入同一个文件夹中，例如/home/test
进入到/home/test路径下，执行命令（test是镜像名称，可以自定义）

docker build -t test . 

这样就准备好了一个镜像。
再执行命令：(-d表示在后台运行，–name，定义容器名称，-p端口号，test运行的镜像名称)

docker run -d --name test -p 8082:8082 test

这样后端就启动好了。
4.部署前端
使用命令（或用指定版本的方式），首先得到一个nginx镜像。

docker pull nginx:latest

准备两个配置文件，首先是docker-compose.yml
以下是简单模板

version: "3"
services: 
  vue_test:  
    container_name: vue-test #容器名称，可自定义
    image: nginx:latest #之前下载的nginx镜像
    ports: 
      - "8080:80"  #左侧为浏览器访问端口，右侧为nginx监听端口
    volumes:
      - ./dist/:/usr/share/nginx/html/ # 指定根html的文件目录
      - ./default.conf:/etc/nginx/conf.d/default.conf # 指定nginx的配置文件
    restart: always # 自动重启

另外一个配置文件是default.conf
简单模板

server {
		listen       80; # nginx监听端口
		server_name  localhost;

		gzip on;
		gzip_min_length 1k;
		gzip_http_version 1.0;
		gzip_comp_level 1;
		gzip_types text/html text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
		gzip_disable "MSIE [1-6].";
		gzip_vary on;
		
		location / {
			root   /usr/share/nginx/html; ## 对应docker-compose文件映射的跟html文件路径
			try_files $uri $uri/ @router;
			index  index.html index.htm;
			error_page 405 =200 http://$host$request_uri;
		}

		location ~ /data/ {
			root /usr/share/nginx/html;  # Vue静态文件的根目录  
		}
		location /api/ { ##前端接口所有的/api开头的接口都会被这里代理到下方proxy_pass的地址中
			proxy_pass http://192.168.0.1:8082/api/;   #这里写你后端的接口地址，服务器ip+后端端口号
			proxy_connect_timeout 6000;     #链接超时设置
			proxy_read_timeout 6000;        #访问接口超时设置
		}

		location @router {
			rewrite ^.*$ /index.html last;
		}
		error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root  /usr/share/nginx/html;
		}
}

打包前端代码，压缩。
进入到/home/vue路径下（可以使用任意空路径）
将两个配置文件和前端代码上传
解压缩前端代码（这里是.zip文件后缀，其他文件类型的解压缩命令可以去百度以下,dist.zip是打好的前端包）

unzip dist.zip

使用以下命令启动即可

docker-compose up -d 

前端部署完成，使用IP+配置的端口，比如：8080访问即可。
使用下面这个命令查看正在运行的容器

docker ps

或者是这样查看所有容器，包括没有运行的

docker ps -a

使用以下命令查看容器日志(name是容器名称)

docker logs name

使用以下命令停止和删除容器

docker stop name

docker rm name

删除镜像的命令是：镜像名称或者id

docker rmi nameOrId