前端html(spa)、后端java通过docker部署

前后端通过docker来部署

完整源码在最后

前端资源单独开发和部署，通过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

Dockerfile：用来配置前端镜像参数

FROM nginx

WORKDIR /usr/webapp

ADD ./html/ .
ADD ./nginx.conf /etc/nginx/nginx.conf

nginx.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<String, String> 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 % 

在页面上重新点击按扭，能够请求到接口

以上是自己的一些积累，纯手工代码，便于自己以后查看。

欢迎拍砖

完整代码在这里