This article undertaking "Visual Studio 2019 configuration vue project" , in the "Visual Studio 2019 configuration vue project" which we enter the project file to open dos window input npm run serve command, which is the development environment for debugging commands, so you can open at development local debugging site. Since we used the Visual Studio 2019 tool, then use lazy (vs will allow developers to use lazy) way to publish the Vue project. This time we do not have IIS, we use the relatively new container technology to deploy this static website (fully static page html + css + js, no asp, aspx, cshtml, jsp, php and other server page).
1, the first release to local
Use VS2019 to open MyVue \ VuejsApp1 this project, right Project Management -> Open command prompt here
Run 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.htmlHave generated files can be released is released by the dist root directory.
Second, publish the file copied to the server
My test server is 192.168.134.129 this linux virtual machine
Dist tool using WinSCP copied to / home / xiajun / vue-object
III: base image nginx: latest pulling
[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
Third, set Dockerfile file
# 设置基础镜像 这里用了nginx的基础镜像
FROM nginx:latest
# 定义作者
MAINTAINER oopxiajun <[email protected]>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/Fourth, set 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;
}
}
}We will Dockerfile nginx.conf these two files together and copied to the service.
Fifth, mirroring and mirror image pushed to the private server
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
Sixth, run container
[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.
This can be accessed on the host: 192.168.134.129: 3000 or 0.0.0.0:3000
Solution:
Change the following in the docker's host (192.168.134.129) in
[root@localhost MyVue]# vi /usr/lib/sysctl.d/00-system.conf
Add the following code:
is named net.ipv4.ip_forward and =. 1
Restart network service
# systemctl restart network
And then visit http://192.168.134.129:3000/
Seven, the new image pushed to the private docker registry on (192.168.134.133:5000). How to build private docker registry, please see "Using Docker Registry quickly build private warehouse Mirror"
[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"]}
This can be used to pull the mirror on another server.
