Docker 部署 Vue3 项目

制作 docker 镜像

docker pull nginx

nginx 的配置文件 default.conf，内容如下

server {
    listen       80;
    server_name  localhost; # 修改为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;
    }
}

用来构建 Docker 镜像的 Dockerfile 文件

FROM nginx

MAINTAINER onesummer

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

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

说明

FROM nginx：该镜像是基于nginx:latest镜像构建的

MAINTAINER onesummer：添加说明

RUN rm /etc/nginx/conf.d/default.conf：删除目录下的default.conf文件

ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置

COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

docker build 构建镜像

-t 后输入给镜像取的名称，最后的点 （.） 不要忘记，代表给利用当前 dockerfile 构建镜像

docker build -t [镜像名称] .


docker build -t pda_1.0.0 .

启动

docker run -d -p 88:80 --name [容器名] [镜像名]

常用命令

docker ps

# 关闭正在运行的容器


docker stop [容器名]

# 删除容器


docker rm [容器名]

# 删除所有已经停止的容器
docker container prune

# 查看放行端口状态
sudo ufw status


# 端口放行
sudo ufw allow [端口号]

#  删除规则
sudo ufw delete allow [端口号]/tcp

# 端口禁止/解除禁止
sudo ufw deny [端口号]
sudo ufw delete deny [端口号]