记录一次vue部署docker步骤

vue部署docker

拉取nginx镜像

docker pull nginx

有Dockerfile文件步骤：

1、打包vue

npm run build

2、写一个default.conf 文件，替换镜像中的conf文件

server {
    listen       8031;# 配置端口
    server_name  0.0.0.0; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

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

3、写一个Dockerfile文件

FROM nginx 

MAINTAINER zy

COPY dist/  /usr/share/nginx/html/

COPY default.conf  /etc/nginx/conf.d/default.conf

4、把dist、Dockerfile、default.conf文件上传到服务器，目录如下：

5、ok，完成前面的步骤就可以进入服务器控制台了，创建容器

docker build -t 镜像别名 .(注意这是个点，不要忘记了)

6、然后运行容器

docker run -d -p 端口:端口 --name 镜像名称 镜像别名

7、部署完成，这是有Dockerfile文件的情况下。

没有Dockerfile文件的步骤

1、进入工作目录

cd /usr/local/docker/nginx

如果不存在，则创建

mkdir -p /usr/local/docker/nginx

在工作目录下一次创建html、conf两个文件夹

mkdir -p html etc

2、创建临时容器

docker run --name temp -p 80:80 -v /usr/local/docker/nginx/html:/usr/share/nginx/html  -d nginx

参数详解：

-p 80:80：将容器的 80端口映射到主机的 80端口,第一个是主机端口，第二个是容器端口。

--name 容器名字 可以随便自定义哦！

-v /usr/local/docker/nginx/html:/usr/share/nginx/html：将主机当前目录下的 html目录挂载到容器的 /usr/share/nginx/html。

-d 后台启动

nginx 启动的镜像的名字

3、nginx配置文件

将nginx容器中的配置文件所在的目录下的文件内容拷贝到宿主机中，让这两个目录的原始内容先保持一致

 docker cp 容器id:/etc/nginx /usr/local/docker/nginx/etc

将拷贝出来的文件搬家一下

mv nginx/* /usr/local/docker/nginx/etc

我们能在主机的etc目录下看到拷贝的文件，在conf.d文件夹中查看到default.conf文件

4、删除创建的临时容器

//停止容器
docker stop 容器名称
//删除容器
docker rm 容器名称

5、修改default.conf文件

cd /usr/local/docker/nginx/etc/conf.d

vim default.conf

按insert键，进入编辑模式，根据需要自己修改调整

修改完，按esc键 ，再按: ,最后输入wq，保存退出

6、创建容器

docker run --restart=always --name nginx -p 80:80  -v /usr/local/docker/nginx/html:/usr/share/nginx/html -v /usr/local/docker/nginx/etc:/etc/nginx -d  nginx

参数详解：

-p 80:80：将容器的 80端口映射到主机的 80端口,第一个是主机端口，第二个是容器端口。

--restart=always 自动启动容器

--name 容器名字 可以随便自定义哦！

-v /usr/local/docker/nginx/html:/usr/share/nginx/html：将主机当前目录下的 html目录挂载到容器的 /usr/share/nginx/html。

-v /usr/local/docker/nginx/etc:/etc/nginx：将主机当前目录下的 etc目录挂载到容器的 /etc/nginx。

-d 后台启动

nginx 启动的镜像的名字

7、上传vue文件

将生成文件拷贝到 /usr/local/docker/nginx/html

8、重启容器

docker restart  nginx

这个没有Dockerfile的步骤转载于：

原文链接：https://blog.csdn.net/yanguan025/article/details/127551578