docker 部署vue+nginx

  1. 获取 nginx 镜像
    docker pull nginx
  2. 打包vue项目 npm run build,打包成功会出现dist文件夹
    在这里插入图片描述
  3. 在同目录下新建default.conf文件用于配置nginx,
    docker 部署vue+nginx_第1张图片

文件内容如下

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  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
  1. 在同目录下创建 Dockerfile 文件,用于docker配置
    docker 部署vue+nginx_第2张图片
    Dockerfile文件内容如下
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

自定义构建镜像的时候基于Dockerfile来构建。

  • FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
  • COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中/usr/share/nginx/html/ 目录下。
  • COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将nginx目录下的default.conf 复制到etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换nginx镜像里的默认配置。
  1. 基于Dockerfile构建vue应用镜像
docker build -t vuenginxcontainer .

-t 是给镜像命名 . 是基于当前目录的Dockerfile来构建镜像
查看本地镜像命令

docker image
  1. 启动 vue app 容器
    基于 vuenginxcontainer 镜像启动容器,运行命令:
docker run -p 3000:80 -d --name vueApp vuenginxcontainer
  • docker run 基于镜像启动一个容器
  • -p 3000:80 端口映射,将宿主的3000端口映射到容器的80端口
  • -d 后台方式运行
  • –name 容器名 查看 docker 进程

最后访问 http://localhost:3000 应该就能访问到该vue应用

你可能感兴趣的