两个项目，前后端合并至一个镜像、一个容器，以端口进行区分的实现流程

1、两个项目，前后端，两个镜像，两个容器。如图1

图1

2、前端构建目录结构。如图2

图2

3、接口构建目录结构。如图3

图3

4、前端构建的相关配置。如图4

图4

5、接口构建的相关配置。如图5

图5

6、调整前端的构建目录结构。将 build 重合名为 dist。将 build_docker 重合名为 build。将 build_docker/c_files/config/init/config0.sh 重命名为 build/c_files/config/init/config_front0.sh。删除 Dockerfile。如图6

图6

7、调整接口的构建目录中的 Dockerfile。如图7

图7

8、在 Jenkins 的配置中，Source Code Management – Multiple SCMs 。添加 2 个 Git 仓库。分别为接口与前端。如图8

图8

9、在 Jenkins 的配置中，Build – Docker Build and Publish 。Tag：pcsfront_dev_65e60624dcbc98445056a602d27c2552e58532df_pcsapi_dev_$GIT_COMMIT。前端的提交 ID，需要每一次手动更改。接口的提交 ID，可以自动读取。如图9

图9

10、查看容器中的目录结构，前端与接口皆存在。且分别可以正常访问。符合预期。如图10

图10

[root@api-5db464c777-fp9gk /]# cd /etc/nginx/conf.d/
[root@api-5db464c777-fp9gk conf.d]# ls -l
total 8
-rwxrwxr-x 1 root root 1109 Feb 23 15:33 pcs_api.conf
-rwxrwxr-x 1 root root  928 Feb 23 15:33 pcs_front.conf
[root@api-5db464c777-fp9gk conf.d]# cd /mcloud/www/
[root@api-5db464c777-fp9gk www]# ls -l
total 16
drwxrwxr-x 1 nginx nginx 4096 Feb 23 15:33 pcs_api
drwxrwxr-x 1 nginx nginx 4096 Feb 23 15:11 pcs_front
[root@api-5db464c777-fp9gk www]# curl http://api.pcs:82/api.txt
api
[root@api-5db464c777-fp9gk www]# curl http://api.pcs/front.txt
front
[root@api-5db464c777-fp9gk www]# curl http://pcsapi.dev.chinamcloud.cn/api.txt
api
[root@api-5db464c777-fp9gk www]# curl http://pcsfront.dev.chinamcloud.cn/front.txt
front
[root@api-5db464c777-fp9gk www]#