本文使用windows10本地测试

使用vue-cli创建vue web
此处使用的bash(前缀自带$,不用输入),也可使用cmd或powershell

#如果没有vue-cli 需要先安装
$ npm install -g @vue/cli
#使用vue-cli 
$ vue --version
@vue/cli 4.0.4
#一般要安装淘宝镜像
#创建一个vue项目,并按照步骤提示,选择自己合适的vue类库
$ vue create hello-world

创建好工程文件之后,进入文件夹,并使用powershell,一般都用powershell操作docker

$ cd hello-world

创建Dockerfile文件
使用vscode打开hello-world文件夹,新建Dockerfile
此时目录为:

D:.
│  .browserslistrc
│  .gitignore
│  babel.config.js
│  Dockerfile
│  package-lock.json
│  package.json
│  README.md
│  tree.txt       
├─node_modules
├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.js
    ├─assets
    │      logo.png
    └─components
            HelloWorld.vue

Dockerfile内容:

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install
COPY . .
RUN npm run build


# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8001
CMD ["nginx","-g","daemon off;"]

构建docker镜像

docker build -t vueapp .  
#标准版写法
docker build --rm -f "Dockerfile" -t lvliangweb:v1 "."

运行docker容器

docker run -d -it -p 8001:80 --rm --name dockerapp vueapp

说明:

-d：代表后台启动
--name xx：这是创建的容器名称
-p 8001:80: 是将nginx的80映射到你服务器的8001端口(注意你服务器的端口是否开放8001，其他端口也可以)
vueapp：镜像名称
dockerapp: 容器名称

打开本地地址访问http://localhost:8001/

docker运行vue

新开一个powershell
查看此时的容器

PS D:\work\demo\vueDocker\hello-world> docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                            NAMES
23d21947cf78        vueapp              "nginx -g 'daemon of…"   9 seconds ago       Up 8 seconds        8001/tcp, 0.0.0.0:8001->80/tcp   dockerapp

查看镜像的详细信息

# vueapp是镜像的自定义名称
docker inspect vueapp

查看容器的详细信息

#dockerapp 是该容器的自定义名称, 也可使用容器的id查看
docker inspect dockerapp
#23d21947cf78 是该容器的id
docker inspect 23d21947cf78

到此容器的创建及使用以可以正常运行.

使用阿里镜像存储我们自定义的镜像

使用阿里云镜像仓库有两种方式:
1.将本地的镜像推送到阿里云镜像仓库
2.使用代码仓库,触发阿里云镜像触发器然后在阿里云中构建(省去本地构建,也推荐的方式)
下面将介绍这两种方式

1.本地镜像推送到阿里云镜像仓库

注册阿里云,登录阿里云控制台
在大菜单中选择容器镜像服务
进入主菜单后,在默认实例下选择镜像仓库,
然后点击右侧的创建镜像仓库
填好仓库信息后点击下一步,代码源选择本地仓库(此处演示本地镜像上传),点击创建镜像仓库按钮即可创建自己的本地镜像仓库
点击仓库之后进入仓库的信息查看,下面是仓库的使用方法

登录阿里云Docker Registry

$ sudo docker login --username=wwei.min@163.com registry.cn-hangzhou.aliyuncs.com

用于登录的用户名为阿里云账号全名，密码为开通服务时设置的密码。

您可以在访问凭证页面修改凭证密码。

从Registry中拉取镜像

$ sudo docker pull registry.cn-hangzhou.aliyuncs.com/wwmin/vueapp:[镜像版本号]

将镜像推送到Registry

$ sudo docker login --username=wwei.min@163.com registry.cn-hangzhou.aliyuncs.com
$ sudo docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/wwmin/vueapp:[镜像版本号]
$ sudo docker push registry.cn-hangzhou.aliyuncs.com/wwmin/vueapp:[镜像版本号]

请根据实际镜像信息替换示例中的[ImageId]和[镜像版本号]参数。

选择合适的镜像仓库地址
从ECS推送镜像时，可以选择使用镜像仓库内网地址。推送速度将得到提升并且将不会损耗您的公网流量。

如果您使用的机器位于VPC网络，请使用 registry-vpc.cn-hangzhou.aliyuncs.com 作为Registry的域名登录，并作为镜像命名空间前缀。

示例
使用"docker tag"命令重命名镜像，并将它通过专有网络地址推送至Registry。

$ sudo docker images
REPOSITORY                                                         TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
registry.aliyuncs.com/acs/agent                                    0.7-dfb6816         37bb9c63c8b2        7 days ago          37.89 MB
$ sudo docker tag 37bb9c63c8b2 registry-vpc.cn-hangzhou.aliyuncs.com/acs/agent:0.7-dfb6816

使用"docker images"命令找到镜像，将该镜像名称中的域名部分变更为Registry专有网络地址。

$ sudo docker push registry-vpc.cn-hangzhou.aliyuncs.com/acs/agent:0.7-dfb6816

推送成功后即可看到镜像
使用镜像方式与其他的镜像没有两样
注意事项: 如果建立的是私人镜像,拉取时需要使用docker login登录

2.代码仓库触发器触发构建镜像

创建镜像仓库
填好仓库信息后点击下一步,代码源选择本地云code(或者其他的源,本地仓库除外),构建设置选中 代码变更自动构建镜像,点击创建镜像仓库按钮后即可创建镜像仓库
注意:如果选择了云code需要先注册云code,并设置好源代码仓库,与github或码云或github的方式一样
点击镜像仓库也可看到基本信息,仓库授权,触发器,镜像版本,镜像同步菜单
基本信息:菜单中的信息有对镜像的基本操作说明,同本地镜像仓库的使用
构建:对构建的设置,代码变更自动构建镜像模式在创建的时候就是选中的,也可对构建规则设置,默认的构建规则是tags:release-v$version,可添加自定义规则,如果想每次提交代码都构建可以设置类型为Branch,Branch分支选择master或develop或release及自己发布的分支,镜像版本可以自己输入自定义的如v1

服务器bash 命令

image_version=`date +%Y%m%d%H%M`;
echo $image_version;
# cd vue2docker
git pull --rebase origin master;
docker stop vue2docker;
docker rm vue2docker;
docker build -t vue2docker:$image_version .;
docker images;
docker run -p 10002:80 -d --name vue2docker vue2docker:$image_version;
# -v ~/docker-data/house-web/appsettings.json:/app/appsettings.json -v ~/docker-data/house-web/NLogFile/:/app/NLogFile   --restart=always
docker logs vue2docker;
#删除build过程中产生的镜像    #docker image prune -a -f
docker rmi $(docker images -f "dangling=true" -q)

Docker使用阿里云镜像仓库

Docker使用阿里云镜像仓库

使用阿里镜像存储我们自定义的镜像

1.本地镜像推送到阿里云镜像仓库

2.代码仓库触发器触发构建镜像