Linux 下使用Docker 部署用Nginx挂载的Vue项目

1. vue项目进行打包生成 dist文件夹，上传至服务器

2.构建vue应用 nginx镜像

nginx 是一个高性能的HTTP和反向代理服务器，用 nginx 镜像作为基础来构建vue应用镜像。

docker pull nginx

docker镜像（Image）一个特殊的文件系统。Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。
docker 镜像相关操作有: 搜索镜像docker search [REPOSITORY[:TAG]]、拉取镜像docker pull [REPOSITORY[:TAG]] 、查看镜像列表docker image ls、删除镜像：docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。

 

 

 

 

3.将dist 文件夹存放在ubuntu 任意文件夹下，在此文件夹中创建Dockerfile

 

 

 4.在项目根目录下创建nginx配置文件

touch 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;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

 

5.配置镜像文件

cd 到项目根目录 

vi Dockerfile

写入：

FROM nginx  
COPY dist/ /usr/share/nginx/html/   #将项目根目录下 dist 文件夹中的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下；
COPY default.conf /etc/nginx/conf.d/default.conf   #将 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

6. 构建镜像

docker build -t 项目名称 .

 

 

 返回以上信息表示构建成功

-t 参数给镜像命名 

. 是基于当前目录的 Dockerfile 来构建镜像

运行 docker images 查看镜像

 

 

 新构建的镜像正常返回

7.运行容器

docker run -d -p 3000:80 --name docker-vue yun-jian

 

 

 

-d 设置容器在后台运行


-p 表示端口映射，把本机的 3000 端口映射到 container 的 80 端口（这样外网就能通过本机的 3000 端口访问了。


--name 设置容器名 docker-vue


docker-demo-vue 构建的镜像名字

docker ps -a 查看容器id

 

 

8.访问项目

浏览器访问  http://localhost:3000/ 可正常返回项目登录页

 

 

 

 

 9.发布镜像

镜像生成后，如果需要方便其他人使用，就需要把镜像发布到 dockerhub

https://hub.docker.com/ 注册账号

推送镜像到 dockerhub 可看领一篇博客https://www.cnblogs.com/sunzzc/p/15308647.html

首次推送失败的话可能是未登录，命令行输入：docker login

输入 dockerhub 的账号密码即可