Docker使用nginx部署VUE项目

目录

一、安装Docker和一些基本Docker命令

二、打包VUE项目

三、写nginx配置文件

四、写Dockerfile文件

五、构建镜像

六、运行容器

七、挂载目录

八、使用docker-compose部署项目

总结


一、安装Docker和一些基本Docker命令

安装略,基本指令如下:

# 构建镜像,test为镜像名,v1为版本号,“.”不可省略,代表当前文件夹下
docker build -t test:v1 .

# 运行容器,-d 后台运行,-p 映射容器内端口到宿主机,--name 容器名字:版本号
docker run -d -p 8080:80 --name test-hello test:v1 

docker ps  # 查看当前运行中的容器

docker images  # 查看镜像列表

docker rm container-id  # 删除指定 id 的容器

docker stop/start container-id  # 停止/启动指定 id 的容器

docker rmi image-id  # 删除指定 id 的镜像

docker volume ls  # 查看 volume 列表

docker network ls  # 查看网络列表

二、打包VUE项目

vue项目根目录进入终端输入npm run build打包项目,在项目根目录会生成一个dist文件夹,复制整个文件夹到一个新的工作文件夹(我命名为nginx,可以用其他方式命名)中的html下,目录结构如下:

└─nginx
    ├─conf.d
    ├─html
    │  └─dist
    └─logs

三、写nginx配置文件

nginx的配置文件有/etc/nginx/nginx.conf和/etc/nginx/conf.d/default.conf两个文件,此处修改default.conf即可,文件如下:

server {
    listen       80;  #  nginx对外暴露的端口
    server_name  localhost;  # 此处为docker服务宿主机的ip
 
    location / {
        root   /home/nginx/vue;  # 选择nginx工作目录
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://localhost:8080;  # nginx代理的端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 该文件放在nginx文件夹中的conf.d中。

四、写Dockerfile文件

文件如下:

# 基础镜像 不指定版本则默认最新
FROM nginx

# 创建目录
RUN mkdir -p /home/nginx/vue
# 指定工作路径
WORKDIR /home/nginx/vue

COPY ./conf.d/default.conf /etc/nginx/conf.d/
COPY ./html/dist /home/nginx/vue

该文件放在nginx文件夹目录下。

五、构建镜像

目前文件结构如下:

└─nginx
    ├─conf.d
    │  └─default.conf
    ├─html
    │  └─dist
    ├─logs
    └─Dockerfile

在nginx目录下打开终端输入docker build -t test:v1 .开始构建镜像,显示如下构建完成:

 可以用docker images命令查看镜像。

六、运行容器

终端下继续输入docker run -d -p 8080:80 --name vue_test my-vue:v1运行容器,显示如下:

 此时在浏览器输入http://localhost:8080即可进入项目,vue部署成功。

七、挂载目录

终端下继续输入以下命令运行容器

docker run -d -v $PWD/html/dist:/home/nginx/vue -v $PWD/logs:/var/log/nginx -v $PWD/conf.d:/etc/nginx/conf.d -p 8080:80 --name vue_test my-vue:v1

运行过程和上面一样,但是此时,项目中的文件由本地挂载上去,修改里面的文件即可生效,不用反复部署。

八、使用docker-compose部署项目

在nginx同级目录下创建一个docker-compose.yml文件,如下:

version : '3.3'
services:
  vue-nginx:
    container_name: vue_test
    image: my-vue:v1
    build:
      context: ./nginx
    ports:
      - "8080:80"
    volumes:
      - ./nginx/html/dist:/home/nginx/vue
      - ./nginx/logs:/var/log/nginx
      - ./nginx/conf.d:/etc/nginx/conf.d
    restart: always

在终端中输入docker compose up -d即可运行,显示如下:

 可以用docker compose ps命令查看运行的容器。


总结

本文主要记录了用docker部署vue项目的过程,使用docker和docker-compose两种部署方法,部署难度主要在于理解nginx的配置文件和Dockerfile文件的编写

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值