目录
1.创建vue项目并编译打包
2.编写dockerfile
3.构建镜像
4.上传制品库(没有制品库可忽略)
5.从制品库拉取镜像(没有制品库可忽略)
6.运行容器
7.验证
1.创建vue项目并编译打包
编译打包
npm install npm run build
在dist目录即可看到编译之后打包的文件
注意
添加vue项目上下文
vue.config.js中添加 publicPath
module.exports = {
transpileDependencies: ["uview-ui"],
publicPath: "/hello/"
};
manifest.json中添加应用名name
{
"name": "hello",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
....
2.编写dockerfile
FROM xxxx.xxxx/nginx:1.12
COPY hello /usr/share/nginx/html/hello
COPY default.conf /etc/nginx/conf.d/default.conf
Dockerfile说明
FROM xxxx.xxxx/nginx:1.12
基于nginx构建镜像，将vue部署到nginx中。
COPY hello /usr/share/nginx/html/hello COPY default.conf /etc/nginx/conf.d/default.conf
复制vue资源以及nginx配置到容器里,hello文件夹里是编译打包后的文件，注意需要给hello文件夹授权 chmod 777 -R hello 不然会出现无法403无法访问的情况
default.conf内容
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;
}
location ^~ /api/(.*)$ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://xxxx:8080/$request_uri;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3.构建镜像
docker build -t hello .
注意 . 表示当前目录，不可省略
构建完成之后可以使用docker images查看
4.上传制品库(没有制品库可忽略)
4.1打成满足要求的tag
docker tag 7649021c873e xxxx.xxxx/ng-hello:v1
4.2 上传到制品库
docker push xxxx.xxxx/ng-hello:v1
5.从制品库拉取镜像(没有制品库可忽略)
docker pull docker push xxxx.xxxx/ng-hello:v1
6.运行容器
docker run #运行一个容器
--name hello #设置容器名称
-p 80:80 #映射主机和容器内的端口
-d #后台运行
xxxx.xxxx/ng-hello:v1
7.验证
浏览器输入 http://xxx.xxxx/hello
