欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用构建Docker镜像的方式部署Vue项目

程序员文章站 2024-01-29 08:46:34
...

准备工作:

  1. 自己电脑安装了node.js
  2. 配置了vue-cli 环境
  3. 远程服务器上安装了docker
  4. 有远程连接和文件上传的工具(我使用的是Xshell于Xftp)
  5. 配置了端口暴露(我使用的是阿里云的ECS需要进行安全组配置)
  1. build vue 项目

    #在vue的main.js的目录下执行npm run build命令
    npm run build
    
  2. 执行完npm run build 命令就会生成多出一个dist目录,然后将该文件夹上传到远程服务器上
    使用构建Docker镜像的方式部署Vue项目

  3. 编写Dockerfile 文件,放在与dist目录所在的同一个目录下,Dockerfile内容如下

    # 设置基础镜像
    FROM nginx
    # 定义作者
    MAINTAINER tsz
    # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
    COPY dist/  /usr/share/nginx/html/
    
  4. 运行生成镜像的命令(一定要达到文件夹里 里面有dist 和Dockerfile文件,最后有一个"."注意)

    #docker build -t imagename:tag .
    
    dockr build -t hello_world:1.0 .
    

    使用构建Docker镜像的方式部署Vue项目

  5. 运行镜像

    #docker run --name='container-name' -p 本机端口:80 -d  image-name:tag
    docker run --name='hello_8056' -p 8056:80 -d hello_world:1.0
    
  6. 访问成功 http://xxxx.xxxx.xxx:8056/#/
    使用构建Docker镜像的方式部署Vue项目