当前位置:   article > 正文

手把手教你用 Docker 部署 Vue3 项目_docker部署vue3项目

docker部署vue3项目

用 docker 可以帮我们快速部署前端项目,本文介绍了如何用 docker 快速部署 vue3 项目。请准备好一台云服务器并安装好 docker,然后开始阅读本教程。

1 项目打包

执行npm run build打包后项目目录中会多出一个 dist 文件夹

2 制作 docker 镜像

利用 docker 拉取 nginx 镜像

docker pull nginx
  • 1

在服务器中创建工作目录,这里我放在 /home 目录下

工作目录中存放三个文件,分别是:

  1. 打包后的项目文件 dist
  2. 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;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  1. 用来构建 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/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Dockerfile 文件解释

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/目录下
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

完成以上步骤之后,进入工作目录,通过 docker build 构建镜像

docker build -t [镜像名称] .
  • 1

注意事项:-t 后输入给镜像取的名称,最后的点 (.) 不要忘记,代表给利用当前 dockerfile 构建镜像

3 启动 docker 容器

先查看我们构建的镜像 docker images

利用 docker run 命令启动 docker 容器

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

查看我们启动的容器 docker ps

关闭正在运行的容器

docker stop [容器名]
  • 1

删除容器

docker rm [容器名]
  • 1

删除所有已经停止的容器

docker container prune
  • 1

4 关闭、开启服务器防火墙

浏览器访问之前,我们需要在防火墙中放行端口

  1. 云服务器的防火墙放行,详见你所用的服务器的文档
  2. Linux 系统防火墙端口放行,以 Ubuntu 20 为例
  • 查看放行端口状态
sudo ufw status
  • 1

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

// 删除规则
sudo ufw delete allow [端口号]/tcp
  • 1
  • 2
  • 3
  • 4

完成之后,就可以在浏览器中查看啦!

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

sudo ufw delete deny [端口号]
  • 1
  • 2
  • 3

参考文献

https://blog.csdn.net/xiaolong124/article/details/123458100?ops_request_misc=&request_id=&biz_id=102&utm_term=docker部署vue的前端项目&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-7-123458100.nonecase&spm=1018.2226.3001.4187

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/871273
推荐阅读
相关标签
  

闽ICP备14008679号