docker-compose 部署前端项目

.dockerignore

@@ -4,14 +4,6 @@ target/
 !**/src/main/**
 !**/src/test/**
 
-### STS ###
-.apt_generated
-.classpath
-.factorypath
-.project
-.settings
-.springBeans
-.sts4-cache
 
 ### IntelliJ IDEA ###
 .idea
@@ -20,12 +12,7 @@ target/
 *.ipr
 
 ### NetBeans ###
-/nbproject/private/
-/nbbuild/
-/dist/
-/nbdist/
-/.nb-gradle/
-build/
+./web/node_modules
 
 ### VS Code ###
 .vscode/

README.md

@@ -6,3 +6,4 @@
 
 # 参考资料
 - [docker-compose 部署 Vue+SpringBoot 前后端分离项目](https://www.cnblogs.com/zhengqing/p/11865364.html)
+- [vue-beauty](https://fe-driver.github.io/vue-beauty/#/components/grid)

docker-compose.yml

@@ -13,7 +13,7 @@ services:
       - ../api:/app                      # 将主机的code-api文件夹(java代码)映射到容器内的app文件夹
       - ./logs/:/app/log                # 映射容器产生的日志到主机的logs文件夹
     ports:                              # 映射端口
-      - "9101:9101"
+      - "8802:8802"
     #command: mvn clean spring-boot:run -Dspring-boot.run.profiles=dev '-Dmaven.test.skip=true' # 容器创建后执行命令运行springboot项目
 
   web:                                  # 前端node容器(运行nginx中的Vue项目)
@@ -25,6 +25,6 @@ services:
     environment:
       TZ: Asia/Shanghai
     ports:
-      - "8101:8101"                      # 映射端口
+      - "8801:8801"                      # 映射端口
 #    depends_on:                          # 依赖于api容器，被依赖容器启动后此web容器才可启动
 #      - api

docker/api/Dockerfile

@@ -1,2 +1,4 @@
 # 指定基础镜像
+FROM docker.io/alpine
 
+COPY ./api /go/src/main/

docker/web/Dockerfile

@@ -1,16 +1,15 @@
 # node镜像
 FROM node:latest as build-stage
+
 # 维护者信息
 MAINTAINER lujiang "[email protected]"
 
-RUN echo "-------------------- web环境配置 --------------------"
-
 # 指定接下来的工作路径为/app  - 类似于cd命令
 WORKDIR /app
 
 # 拷贝前端项目到app目录下
 RUN echo $PWD
-COPY ./web/* .
+COPY ./web /app/
 
 
 # 设置淘宝npm镜像
@@ -19,28 +18,30 @@ RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
 RUN cnpm install
 
 # 打包 - 目的：丢到nginx下跑
-RUN cnpm run build:prod
+# RUN npm run build:prod
+RUN cnpm run build
 
 # 前端项目运行命令
 #CMD ["npm","run","start"]
 
 
-# ======================== 上：npm打包  下：nginx运行 ========================
-# nginx镜像
+# nginx镜像, 上面创建的目录(app)在容易中并不会有。因为这里有FROM是一个新的容器
 FROM nginx:1.15.3-alpine as production-stage
+
 # 维护者信息
 MAINTAINER lujiang "[email protected]"
 
 # 移除nginx容器的default.conf文件、nginx配置文件
 RUN rm /etc/nginx/conf.d/default.conf
 RUN rm /etc/nginx/nginx.conf
 # 把主机的nginx.conf文件复制到nginx容器的/etc/nginx文件夹下
-COPY nginx.conf /etc/nginx/
+COPY docker/web/nginx.conf /etc/nginx/
+
 # 拷贝前端vue项目打包后生成的文件到nginx下运行
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/dist /usr/share/nginx/html/
 
 # 暴露8101端口
-EXPOSE 8101
+EXPOSE 8801
 
 # 注：CMD不同于RUN，CMD用于指定在容器启动时所要执行的命令，而RUN用于指定镜像构建时所要执行的命令。
 #    RUN指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定--no-cache参数，如：docker build --no-cache

docker/web/nginx.conf

@@ -27,7 +27,7 @@ http {
   	server {
         listen       8101;
         charset utf-8;
-        server_name  www.zhengqingya.com;# 服务器地址或绑定域名
+        server_name  www.workbench.com;# 服务器地址或绑定域名
 
     	# start ---------------------------------------------------------------------------------------------
 

note.md

@@ -0,0 +1,15 @@
+
+
+# docker
++ 在 Dockerfile 的规则中，如果目标路径最后跟 “/“ 符号，那么就代表目录，否则就是文件。如果目标目录不存在，那么会新建这个目录
++ 使用`COPY`时，源路径如果是目录，那么只复制其内部的文件而不包含自身，另外文件自身的文件系统元数据也将复制过去，比如说文件权限等。
++ ADD 指令除了 COPY 指令的简单复制功能外，还支持从网络地址上下载。
++ ADD 源路径是打包压缩文件, 会在docker内自动解压文件。但是是源路径是地址（下载的方式）时不会解压
+
+
+
+
+
+
+# 参考资料
++ [Dockerfile-COPY-和-ADD-指令区别和使用规则](https://islishude.github.io/blog/2019/06/29/docker/Dockerfile-COPY-%E5%92%8C-ADD-%E6%8C%87%E4%BB%A4%E5%8C%BA%E5%88%AB%E5%92%8C%E4%BD%BF%E7%94%A8%E8%A7%84%E5%88%99/)