Docker version 18.09.2, build 6247962
vue cli --version 3.3.0
macOS Mojave Verison 10.14.1
nginx:latest
node:latest
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/6cefe477bb757e9445656b2e0b9c87f4.gif)
yarn serve / npm run serve
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/f831482fb5ffe16c96ba0e98419088b8.gif)
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/61830bd8da72c26a5bb0b19016b70930.png)
import axios from 'axios';
……
axios.get('/api/json', {
params: {}
}).then(
res => {
console.log(res);
}
).catch(
error => {
console.log(error);
}
)
……
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/4892d0f8cb0a14b626797821e5092e59.jpeg)
yarn build / npm run build
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/102ee8a3b9280d38ddea3d537d132530.gif)
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/0d111616b84919da42a5cc61f00ce3b6.png)
docker pull nginx
Docker镜像(Image)一个特殊的文件系统。Docker 镜像是一个特殊的文件系统,除了提供容器运行时所需的程序、库、资源、配置等文件外,还包含了一些为运行时准备的一些配置参数(如匿名卷、环境变量、用户等)。镜像不包含任何动态数据,其内容在构建之后也不会被改变。
Docker 镜像相关操作有:搜索镜像,docker search [REPOSITORY[:TAG]];拉取镜像,docker pull [REPOSITORY[:TAG]];查看镜像列表,docker image ls;删除镜像,docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。
Docker 镜像名称由 REPOSITORY 和 TAG 组成 [REPOSITORY[:TAG]],TAG默认为 latest。
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
自定义构建镜像的时候基于 Dockerfile 来构建。
FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。
docker build -t vuenginxcontainer .
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/d62211abbc4aead4f9789a756e726ffc.gif)
docker image ls | grep vuenginxcontainer
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/437eb85dd6a90816d53dcbbe81d5c20c.png)
docker run \
-p 3000:80 \
-d --name vueApp \
vuenginxcontainer
docker run 基于镜像启动一个容器
-p 3000:80 端口映射,将宿主的3000端口映射到容器的80端口
-d 后台方式运行
--name 容器名,查看 Docker 进程
docker ps
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/7a0006ffd8c1348597b33497c8ea94dd.png)
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/30f57b0adea3d87e0b49c1643bc0207d.jpeg)
'use strict';
const express = require('express');
const PORT = 8080;
const HOST = '0.0.0.0';
const app = express();
app.get('/', (req, res) => {
res.send('Hello world\n');
});
app.get('/json', (req, res) => {
res.json({
code: 0,
data :'This is message from node container'
})
});
app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);
docker pull node
FROM node
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "npm", "start" ]
node_modules
npm-debug.log
docker build -t nodewebserver .
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/c7ef2f53a3f12dbcd8942cb962b49e1b.gif)
docker run \
-p 5000:8080 \
-d --name nodeserver \
nodewebserver
docker ps
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/48cd227cdd9492522dc1fc0f82eb8b9b.png)
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/b3f0608160fc837a6d88650e70e0e5ed.png)
docker exect -it 02277acc3efc bash
cat /etc/hosts
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/943cb58f07cc369dbb911b88226c842a.png)
docker inspect 02277acc3efc
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/4501dd2c8d3ab4801e8f2e5765176b50.png)
location /api/ {
rewrite /api/(.*) /$1 break;
proxy_pass http://172.17.0.2:8080;
}
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
docker run \
-p 3000:80 \
-d --name vuenginxnew \
--mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d \
--mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/dist,target=/usr/share/nginx/html \
nginx
--mount type=bind,source={sourceDir},target={targetDir} 将宿主机的 sourceDir 挂载到容器的 targetDir 目录上。
此处运行的命令较长,如果每次重新输入难免麻烦,我们可以将完整的命令保存到一个 shell 文件 vueapp.sh 中,然后直接执行 sh vueapp.sh。
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/d925b321c7b0ac68d50e51e3cc0e1007.png)
upstream backend {
server 172.17.0.2:8080;
server 172.17.0.3:8080;
}
……
location /api/ {
rewrite /api/(.*) /$1 break;
proxy_pass backend;
}
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/1485cd018d5068dc84148330a38f4dd3.jpeg)
https://juejin.im/post/5cbe89b6f265da0373718707