本文承接《Visual Studio 2019配置vue项目》,在《Visual Studio 2019配置vue项目》里面我们进入项目文件下打开dos窗口输入 npm run serve 命令，这是开发环境调试用的指令，这样可以在开发时打开本地调试站点。我们既然用到了 Visual Studio 2019 这个工具，那么就用懒人（使用vs都会让开发人员变懒）方式来发布这个Vue项目。这次我们不用IIS，我们用比较新的容器技术来部署这个静态网站（全静态页面html+css+js、无asp、aspx、cshtml、jsp、php等服务器页面）。
1，先发布到本地
使用VS2019 打开 MyVue\VuejsApp1这个项目，右键项目管理-->在此处打开命令提示符
运行 npm run build
F:\GitHub_Code\MyVue\VuejsApp1> npm run build
> [email protected] build F:\GitHub_Code\MyVue\VuejsApp1
> vue-cli-service build
| Building for production...
DONE Compiled successfully in 1077ms 18:08:45
File Size Gzipped
dist\js\chunk-vendors.d9eb519d.js 61.78 kb 22.17 kb
dist\js\app.43e89baa.js 2.75 kb 1.30 kb
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html已经生成了可以发布的文件了 dist 就是发布的 根目录。
二，发布文件拷贝到服务器上
我的测试服务器是192.168.134.129 这台linux 虚拟机
利用WinSCP工具将dist 拷贝到 /home/xiajun/vue-object
三：基础镜像nginx:latest 拉取
[root@localhost vue-object]# docker pull nginx
Using default tag: latest
Trying to pull repository docker.io/library/nginx ...
latest: Pulling from docker.io/library/nginx
68ced04f60ab: Pull complete
28252775b295: Pull complete
a616aa3b0bf2: Pull complete
Digest: sha256:2539d4344dd18e1df02be842ffc435f8e1f699cfc55516e2cf2cb16b7a9aea0b
Status: Downloaded newer image for docker.io/nginx:latest
三，设置Dockerfile 文件
# 设置基础镜像 这里用了nginx的基础镜像
FROM nginx:latest
# 定义作者
MAINTAINER oopxiajun <[email protected]>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/四，设置nginx.conf
worker_processes auto;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
client_max_body_size 20m;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}我们将Dockerfile和nginx.conf这两个文件一同拷贝到 服务上。
五，镜像制作和镜像推送到私有镜像服务器
docker build -t 192.168.134.133:5000/myvueapp1:v1 .
[root@localhost MyVue]# docker build -t 192.168.134.133:5000/myvueapp1:v1 .
Sending build context to Docker daemon 420.4 kB
Step 1/5 : FROM nginx:latest
---> 6678c7c2e56c
Step 2/5 : MAINTAINER oopxiajun <[email protected]>
---> [Warning] IPv4 forwarding is disabled. Networking will not work.
---> Running in e5e16ebd4ecc
---> d2f029fa65b2
Removing intermediate container e5e16ebd4ecc
Step 3/5 : COPY dist/ /usr/share/nginx/html/
---> a90980130694
Removing intermediate container abb331b8d2d8
Step 4/5 : COPY nginx.conf /etc/nginx/nginx.conf
---> cb2ebd510ce9
Removing intermediate container 446551fbf390
Step 5/5 : RUN echo 'echo init ok!!'
---> [Warning] IPv4 forwarding is disabled. Networking will not work.
---> Running in b9e914ac359a
echo init ok!!
---> 593748cccec7
Removing intermediate container b9e914ac359a
Successfully built 593748cccec7
[root@localhost MyVue]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
192.168.134.133:5000/myvueapp1 v1 593748cccec7 27 minutes ago 127 MB
192.168.134.133:5000/busybox v1 83aa35aa1c79 2 weeks ago 1.22 MB
docker.io/nginx latest 6678c7c2e56c 3 weeks ago 127 MB
mcr.microsoft.com/mssql/server latest ba266fae5320 5 months ago 1.57 GB
docker.io/mysql latest 91dadee7afee 12 months ago 477 MB
六，运行容器
[root@localhost MyVue]# docker run -p 3000:80 -d --name myvueapp1 593748cccec7
WARNING: IPv4 forwarding is disabled. Networking will not work.
503b58db59bdb72ed1ee38febbbb696409714a9103a73557d43324ca137ae45d
[root@localhost MyVue]# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
503b58db59bd 593748cccec7 "nginx -g 'daemon ..." 20 minutes ago Up 20 minutes 0.0.0.0:3000->80/tcp myvueapp1
有句警告：WARNING: IPv4 forwarding is disabled. Networking will not work.
这个可以在宿主机上访问：192.168.134.129:3000 或者 0.0.0.0:3000
解决办法：
在docker的宿主机（192.168.134.129）中更改以下
[root@localhost MyVue]# vi /usr/lib/sysctl.d/00-system.conf
添加如下代码：
net.ipv4.ip_forward=1
重启network服务
# systemctl restart network
然后再访问 http://192.168.134.129:3000/
七，将新建的镜像推送到私有docker registry （192.168.134.133:5000）上。如何搭建私有docker registry 请查看《使用Docker Registry快速搭建私有镜像仓库》
[root@localhost MyVue]# docker push 192.168.134.133:5000/myvueapp1:v1
The push refers to a repository [192.168.134.133:5000/myvueapp1]
f6506b3351fe: Pushed
d135129b0b29: Pushed
2d5320e70dcb: Pushed
55a77731ed26: Pushed
71f2244bc14d: Pushed
f2cb0ecef392: Pushed
v1: digest: sha256:5038285cfece97319bd6106c0237e0bf6660c7277b02e1d5fc35b8dce4e1e427 size: 1572
[root@localhost MyVue]# curl http://192.168.134.133:5000/v2/_catalog
{"repositories":["busybox","myvueapp1"]}
在其他服务器上可以拉取使用该镜像了。
