大家好，我是南城余！ 最近在找工作，正好手里有台服务器，之前项目上线用的宝塔部署项目上线，在公司实习了一年后，发现如今项目部署都使用的是容器化部署方案，也就是类似于和 Docker 一样的部署方案。今天一篇文章带大家用 Docker 部署前后端项目。
前端分别用域名和无域名实现了下。具体可以见下方步骤描述： <a name="LkpKO"></a>
1、后端
IDEA 打包，如下图：
1.1、dockerfile
在任意目录下创建 Dockerfile 文件，如 /app,并上传这两个文件。
# 使用官方 Java 镜像作为基础镜像
FROM openjdk:8-jdk
# 设置容器内的工作目录
WORKDIR /app
# 复制本地文件到容器内的工作目录
COPY ./*.jar /app/app.jar
# 指定容器启动后执行的命令，这里使用 java 命令运行 Spring Boot 应用
CMD ["java", "-jar", "app.jar"]
# 暴露端口，如果 Spring Boot 应用使用了不同的端口，需要修改
EXPOSE 8001
<a name="T4Owj"></a>
1.2、构建镜像包
创建完成后，用docker build -t techmindwave-backend:1.0 .构建镜像包。 <a name="K9ImQ"></a>
1.3、启动容器
docker run -p 8001:8001 -d techmindwave-backend:1.0
此处，按照上方已经成功部署 若是云服务器，记得开放相应端口
2、前端(无域名)
<a name="K7oh3"></a>
2.1、Dockerfile
nginx.conf
# 使用官方 Nginx 镜像作为基础镜像 FROM nginx:latest # 将本地的 Nginx 配置文件复制到镜像的配置文件目录 COPY ./nginx.conf /etc/nginx/nginx.conf # 将构建好的前端静态文件复制到 Nginx 的 www 目录下 COPY ./dist /usr/share/nginx/html events {} http { server { listen 800; # 监听 800 端口 ## 添加上这个配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } # 静态文件服务 root /usr/share/nginx/html; index index.html; # 配置反向代理 location /api { proxy_pass http://106.14.202.122:8001/; # 将请求转发到指定地址 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_set_header X-Forwarded-Proto $scheme; } } } <a name="z5Pm0"></a>
2.2、构建镜像包
创建完成后，用docker build -t techmindwave-frontend:1.0 .构建镜像包。 <a name="HzZbg"></a>
2.3、启动容器
docker run -p 800:800 -d techmindwave-frontend:1.0
3、前端(有域名)
<a name="yS10S"></a>
3.1、Dockerfile
# 使用官方 Nginx 镜像作为基础镜像 FROM nginx:latest # 将本地的 Nginx 配置文件复制到镜像的配置文件目录 COPY ./nginx.conf /etc/nginx/nginx.conf # 将构建好的前端静态文件复制到 Nginx 的 www 目录下 COPY ./dist /usr/share/nginx/html COPY ./default.conf /etc/nginx/conf.d/default.conf #将ssl证书复制到容器中 copy ./certificates /etc/nginx/ssl # Expose ports 80 and 443 EXPOSE 80 EXPOSE 443 ** default.conf ** server { listen 80; server_name techmindwave.nanchengyu.cn; # Redirect HTTP to HTTPS return 301 https://$host$request_uri; } server { listen 443 ssl; server_name techmindwave.nanchengyu.cn; ssl_certificate /etc/nginx/ssl/nginx.pem; ssl_certificate_key /etc/nginx/ssl/nginx.key; ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } # 配置反向代理 location /api { proxy_pass http://106.14.202.122:8001/; # 将请求转发到指定地址 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_set_header X-Forwarded-Proto $scheme; } }
nginx.conf
user nginx; worker_processes auto; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/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 /var/log/nginx/access.log main; sendfile on; keepalive_timeout 65; include /etc/nginx/conf.d/*.conf; } <a name="y1LHf"></a>
3.2、构建镜像包
创建完成后，用docker build -t techmindwave-frontend:3.0 .构建镜像包。 <a name="ZgYtF"></a>
3.3、启动容器
docker run -d -p 80:80 -p 443:443 \ -v ./certificates/nginx.pem:/etc/nginx/ssl/nginx.pem \ -v ./certificates/nginx.key:/etc/nginx/ssl/nginx.key \ --name my-nginx-container techmindwave-frontend:3.0
