• Docker+Nginx 部署Vue+Element前端项目


    准备工作

    (1)安装nginx镜像

    docker pull nginx

    (2)查看nginx镜像

     docker images

    部署项目

     (1)生成vue项目

    npm run build

    (2)创建 Nginx Config配置文件

            在项目根目录下创建 Nginx 文件夹,该文件夹下新建文件 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;
        try_files $uri $uri/ /index.html;
    }
    
    #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;
    }
    }

    该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html,所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

    (3)创建 Dockerfile 文件

    FROM nginx
    COPY dist/ /usr/share/nginx/html/
    COPY nginx/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 镜像里的默认配置。

     (4)基于该 Dockerfile 构建 Vue 应用镜像

             运行命令(注意不要少了最后的 “.” ):

    docker build -t vue .

    -t 是给镜像命名,. 是基于当前目录的 Dockerfile 来构建镜像。

    查看本地镜像,运行命令:
    docker image ls | grep vue

     到此时我们的 Vue 应用镜像 vue 已经成功创建。接下来,我们基于该镜像启动一个 Docker 容器。

    docker run  -p 80:80  -d --name vuecontains  vue
    • docker run 基于镜像启动一个容器
    • -p 80:80 端口映射,将宿主的80端口映射到容器的80端口
    • -d 后台方式运行
    • --name 容器名,查看 Docker 进程
    docker ps

     可以发现名为 vuecontains 的容器已经运行起来。此时访问 http://server 应该就能访问到该 Vue 应用:

  • 相关阅读:
    2020/3/21 简单的学习
    2020/3/7 A-B
    2020/3/6 旋转骰子
    2020/3/6 美丽数组
    面向对象程序设计寒假作业2
    自我介绍
    深度优先搜索-迷宫问题(走迷宫题解)
    开机方案题解
    好吃的巧克力题解
    数楼梯题解
  • 原文地址:https://www.cnblogs.com/ZhengHengWU/p/12582471.html
Copyright © 2020-2023  润新知