完整源码在最后
前端资源单独开发和部署，通过nginx来设置html访问路径，并将所有非/api访问路径都指向前端目录。
接口服务也是通过docker单独服务
注：这里前后端部署在同一个机器（本地localhost）上不同docker容器中
前后端没有直接通信，因为docker容器之间直接通信，需要做一些额外配置，这里略过。
我这里前后端通过宿主主机（本地192.168.77.49）来通信，
实现数据流程 如下 1 - 2 - 3 - 4 - 5 - 6
前端目录，我这里建个目录static，有个html，若实际开发中 这里可以放SPA的前端资源，类似webpack打包后dist目录中的文件。
还有额外两个文件:Dockerfile 和 nginx.conf
FROM nginx WORKDIR /usr/webapp ADD ./html/ . ADD ./nginx.conf /etc/nginx/nginx.confnginx.conf：用来配置前端一些参数，关键代码
server {
listen 80;
server_name localhost;
root /usr/webapp;
location / {
try_files $uri $uri/ /;
index index.html index.htm;
}
location /api {
proxy_pass http://192.168.77.49:8099;# 这里ip 换成当前主机ip
}
...
后端java
后端代码写了个简单的接口，post方式获取token
@RestController
@RequestMapping(Constant.path + "/account")
public class AccountController {
@PostMapping("/login")
String login(Map body) {
String userName = body.get("username");
String password = body.get("password");
String token = TokenTools.createToken(userName, password);
return token;
}
}
后端mvn打包，生成jar文件。代码结构如
后端Dockerfile配置
FROM java:8 WORKDIR /usr/local/custom ADD ./target/demo-0.0.1-SNAPSHOT.jar demo.jar EXPOSE 8099 ENTRYPOINT ["java","-jar","demo.jar", "--server.port=8099"]
至此，前后端代码都准备好，相关docker打包文件也写好。
打包镜像 切换到static目录，基于nginx打包前端html镜像zhongquanwang@KP-MBP-1286 static % docker build -t static:1.0 . [+] Building 10.5s (9/9) FINISHED => [internal] load build definition from Dockerfile 0.0s => => transferring dockerfile: 128B 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [internal] load metadata for docker.io/library/nginx:latest 10.4s => [internal] load build context 0.0s => => transferring context: 3.70kB 0.0s => [1/4] FROM docker.io/library/nginx@sha256:ecc068890de55a75f1a32cc8063e79f90f0b043d70c5fcf28f1713395a4b3d49 0.0s => => resolve docker.io/library/nginx@sha256:ecc068890de55a75f1a32cc8063e79f90f0b043d70c5fcf28f1713395a4b3d49 0.0s => CACHED [2/4] WORKDIR /usr/webapp 0.0s => [3/4] ADD ./html/ . 0.0s => [4/4] ADD ./nginx.conf /etc/nginx/nginx.conf 0.0s => exporting to image 0.0s => => exporting layers 0.0s => => writing image sha256:2b71b116f6d935406c3f5f34c5c68d057f8705d91435206972c5b51df6812030 0.0s => => naming to docker.io/library/static:1.0 0.0s Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them zhongquanwang@KP-MBP-1286 static % docker images REPOSITORY TAG IMAGE ID CREATED SIZE static 1.0 2b71b116f6d9 20 seconds ago 142MB zhongquanwang@KP-MBP-1286 static %切换到demo目录，基于java8打包后端应用镜像
zhongquanwang@KP-MBP-1286 docker_static_demo % cd demo zhongquanwang@KP-MBP-1286 demo % docker build -t demo:1.0 . [+] Building 1.7s (8/8) FINISHED => [internal] load build definition from Dockerfile 0.0s => => transferring dockerfile: 37B 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [internal] load metadata for docker.io/library/java:8 1.6s => [1/3] FROM docker.io/library/java:8@sha256:c1ff613e8ba25833d2e1940da0940c3824f03f802c449f3d1815a66b7f8c0e9d 0.0s => [internal] load build context 0.0s => => transferring context: 80B 0.0s => CACHED [2/3] WORKDIR /usr/local/custom 0.0s => CACHED [3/3] ADD ./target/demo-0.0.1-SNAPSHOT.jar demo.jar 0.0s => exporting to image 0.0s => => exporting layers 0.0s => => writing image sha256:7ab2a5934887be6b7af1cb0b0a31645050b239937efb02e3107e3b8c34edbe1a 0.0s => => naming to docker.io/library/demo:1.0 0.0s Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them zhongquanwang@KP-MBP-1286 demo % docker images REPOSITORY TAG IMAGE ID CREATED SIZE demo 1.0 7ab2a5934887 2 minutes ago 661MB static 1.0 2b71b116f6d9 6 minutes ago 142MB zhongquanwang@KP-MBP-1286 demo %
前后端docker 镜像都已经制作完成，接下来分开启动容器
启动容器 启动前端nginx注意这里端口是80映射到80
zhongquanwang@KP-MBP-1286 demo % docker run -d -p 80:80 --name static static:1.0 f1ea81a5166b4c337771072be6893839a7c46b4a8e59187e5d4ff196ad8dd0db zhongquanwang@KP-MBP-1286 demo % docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES f1ea81a5166b static:1.0 "/docker-entrypoint.…" 7 seconds ago Up 5 seconds 0.0.0.0:80->80/tcp static zhongquanwang@KP-MBP-1286 demo %
浏览器来个loaclhost，打开nginx，此时能正常打开，但点击按扭，拿不到接口数据，因为java还没有启动
启动java服务这里端口是从 8099->8099，需要注意两个点
1 nginx中配置后端接口代理的地方，端口需要和这里一致，
2 代理ip需要和宿主ip一致
zhongquanwang@KP-MBP-1286 demo % docker run -d -p 8099:8099 --name demo demo:1.0 7bee3a2894cbc1cbb8d9e8763047eb51533d6cc888ea7dbefa3992570291cac3 zhongquanwang@KP-MBP-1286 demo % docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 7bee3a2894cb demo:1.0 "java -jar demo.jar …" 4 seconds ago Up 3 seconds 0.0.0.0:8099->8099/tcp demo f1ea81a5166b static:1.0 "/docker-entrypoint.…" 9 minutes ago Up 9 minutes 0.0.0.0:80->80/tcp static zhongquanwang@KP-MBP-1286 demo %
在页面上重新点击按扭，能够请求到接口
以上是自己的一些积累，纯手工代码，便于自己以后查看。
欢迎拍砖
完整代码在这里
