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