{"id":24600236,"url":"https://github.com/real-jacket/docker-demo","last_synced_at":"2026-01-03T18:05:43.017Z","repository":{"id":37703289,"uuid":"187447681","full_name":"real-jacket/docker-demo","owner":"real-jacket","description":"一个用docker来部署一个前后端分离的实例","archived":false,"fork":false,"pushed_at":"2022-12-10T14:58:16.000Z","size":2962,"stargazers_count":1,"open_issues_count":26,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-24T13:19:22.420Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/real-jacket.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-19T07:38:45.000Z","updated_at":"2023-03-07T05:20:54.000Z","dependencies_parsed_at":"2023-01-26T02:45:26.448Z","dependency_job_id":null,"html_url":"https://github.com/real-jacket/docker-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fdocker-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fdocker-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fdocker-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fdocker-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/real-jacket","download_url":"https://codeload.github.com/real-jacket/docker-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244173496,"owners_count":20410295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-24T13:19:19.451Z","updated_at":"2026-01-03T18:05:42.970Z","avatar_url":"https://github.com/real-jacket.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 简介\n\n一个用docker来部署一个前后端分离的实例\n\n# 常见前端如何部署项目上线\n\n将打包后的代码放到服务器，通过niginx等使其在后台保持运行\n\n# 利用 docker 部署项目\n\n## 具体实现步骤\n\n1. 将vue项目打包，基于nginx docker 构建前端工程镜像，启动一个前端容器 vueApp\n2. express项目提供后台接口，基于node镜像启动一个容器，nodewebserver\n3. 修改 前端容器 vueApp，修改nginx配置转发请求\n\n## 构建 vue 镜像\n\n在vue项目打包生成dist 目录，将dist 目录上传到服务器，构建静态网站\n\n### 获取 nginx 镜像\n\n```bash\ndocker pull nginx\n```\n\n### 创建 nginx config 配置文件\n\n在vue项目根目录下创建 `nginx` 文件夹，在该文件夹下创建配置文件 `defalut.conf`\n\n```nginx\nserver {\n    listen 80;\n    server_name localhost;\n\n    #charset koi8-r\n    access_log /var/log/nginx/host.access_log main;\n    error_log /var/log/nginx/error_log error;\n\n    location / {\n        root /usr/share/nginx/html;\n        index index.html index.html;\n    }\n\n    # 对接口进行代理转发\n    location /api/ {\n        rewrite /api/(.*) /$1 break;\n        proxy_pass http://172.17.0.2:8080;\n    }\n\n    #error_page 404 /404.html\n\n    # redirect server error pages to the static page /50x.html\n    #\n    error_page 500 502 503 504 /50x.html;\n    location = /50x.html{\n        root /usr/share/nginx/html;\n    }\n}\n```\n\n该配置文件定义了首页的指向为 `/sur/share/nginx/html/index.html`,所以我们会把构建的`index.html`相关的静态文件放到`usr/share/nginx/html`目录下（这个指的docker 容器下的目录）\n\n### 创建 Dockfile 文件\n\n```docker\nFROM nginx\nCOPY dist/ /usr/share/nginx/html/\nCOPY nginx/default.conf /etc/nginx/conf.d/default.conf\n```\n\n* docker 自定义镜像基于 Dockfile 进行操作（文件里写一些操作的命令）\n* `FROM nginx` 命令表示该镜像基于 `nginx:latest` 镜像进行构建\n* 两个`COPY`命令表示 将对应的文件复制到新构建的镜像中\n\n### 构建 vue 镜像\n\n```bash\ndocker build -t vueApp .\n```\n\n`-t` 参数表示给构建的镜像命名，`.`表示基于当前目录的 `Dockfile` 进行构建镜像\n\n### 基于镜像 启动容器\n\n基于 vue 镜像（vueApp） 进行启动容器（保持后台运行）\n\n```bash\ndocker run \\\n-p 3000:80 \\\n-d  \\\n--name \\\nvueApp \\\nvuecontainer\n```\n\n* `docker run` 表示基于一个镜像（vueApp）创建并运行容器\n* `docker start` 表示启动一个已经创建的容器\n* `-p 3000:80` 表示端口映射，将宿主的3000端口映射到构建的容器（vuecontainer）的80端口\n* `-d` 表示创建的容器在后台运行（是一种可以保持后台运行的后台运行容器）\n* `--name` 表示对构建的容器命名\n\n```bash\ndocker ps\n```\n\n查看正在运行的容器，`-a` 表示查看所有的容器\n如果写的代码有问题，是会提示构建失败的(有时候也不会提示，请确认自己的代码没问题)\n\n## 构建一个 node express api后台\n\n### 编写路由\n\n### 获取　node 镜像\n\n```bash\ndocker pull ndoe\n```\n\n### 在node项目目录下，创建 `Dockerfile` 将`express`项目`docker`化\n\n```docker\nFROM node\n\nWORKDIR /usr/src/app\n\nCOPY package*.json ./\n\nRUN npm install\n\nCOPY . .\n\nEXPOSE 8080\nCMD [\"npm\",\"start\"]\n```\n\n* `WORKDIR` 表示项目运行目录\n* 然后拷贝所有的配置文件，运行 `npm install`，运行 `npm start`启动项目，对外暴露8080端口来访问\n\n构建的时候，包依赖模块忽略构建，可以通过 `.dockerignore` 文件来配置\n\n```docker\nnode_modules\nnpm-debug.log\n```\n\n### 构建 nodewebserver 镜像\n\n```docker\ndocker build -t ndoewebserver\n```\n\n### 构建 nodeserver 服务容器\n\n```docker\ndocker run \\\n-p 5000:8080 \\\n-d \\\n--name nodeserver \\\nnodewebserver\n```\n\n## 跨域转发\n\n若要将 `vuecontainer` 容器的请求转发到 `nodeserver` 容器上，必选先知道 `nodeserver` 容器上的 `ip` 地址与端口\n\n```docker\ndocker inspect nodeserver\n```\n\n此命令查看容器的相关信息，找到 `NetworkSettings` 中的 `IPAddress` 与 `Ports` 即可以知道 `ip` 地址 与 端口的对应关系\n\n### 修改 nginx 配置\n\n在上面编写的时候其实已经把对应的配置添加上了\n\n```nginx\nlocation /api/ {\n        rewrite /api/(.*) /$1 break;\n        proxy_pass http://172.17.0.2:8080;\n    }\n```\n\n## 优化\n\n当前端项目变动的时候，都需要重新构建镜像，启动容器非常不方便。优化，通过重启容器来实现项目的更新\n将 dist 目录与 nginx 配置目录通过挂载的方式来启动容器避免。\n\n### 修改Dockerfile文件\n\n修改vue项项目下的Dockerfile文件配置，删除掉两个 COPY 命令\n\n### 重新运行 vue 应用容器\n\n直接基于`nginx`镜像来启动容器（vuecontainernew）\n\n```docker\ndocker run \\\n-p 3000:80 \\\n-d \\\n--name vuecontainernew \\\n--mount type=bind,source=$HOME/Desktop/vue_demo/vue/nginx,target=/etc/nginx/conf.d \\\n--mount type=bind,source=$HOME/Destop/vue_demo/vue/dist/,target=/usr/share/nginx/html \\\nnginx\n```\n\n两个`--mount` 命令表示挂载的文件，`--mount type=bind,source={sourceDir},target={targetDir}` 将宿主机的`sourceDir`挂载到容器的`targetDir`上\n可以将命令写在一个`sh`文件里\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freal-jacket%2Fdocker-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freal-jacket%2Fdocker-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freal-jacket%2Fdocker-demo/lists"}