docker---部署vue-js项目

本文介绍如何使用npm run build命令打包Vue.js项目,并通过Docker容器部署至Nginx。步骤包括创建目录结构、配置nginx.conf、运行Docker容器。部署后,可通过ip:80直接访问Vue.js页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 项目结构

vue-js版本:2.6.10

 

用指令 npm run build 打包vue-js项目。打包成功后会生成一个目录dist。

->

注:传统方式是将vue-js部署到nginx服务器,现在是通过nginx容器来挂载vue-js的文件。

2 创建目录

仿照nginx的目录结构创建

  cd /opt

  mkdir  nginx

  cd    nginx

  mkdir  conf

  mkdir  html

将dist文件里的内容(不包括dist)拷贝到/opt/nginx/html目录下

3 创建nginx.conf

在/opt/nginx/conf目录下创建nginx.conf文件,并根据实际情况填写nginx.conf的内容。

4 docker 命令

创建容器:

docker run -d -p 80:80 -v /opt/nginx:/usr/share/nginx  nignx:latest

-v  宿主机的文件系统:容器的工作空间

ip:80可以直接访问vue-js页面。

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值