使用docker部署vue项目(nginx基础之上)

使用环境ubuntu环境

先下载nginx

sudo apt-get install nginx

安装好的文件位置:
/usr/sbin/nginx:主程序
/etc/nginx:存放配置文件
/usr/share/nginx:存放静态文件
/var/log/nginx:存放日志

将vue项目打包

npm run build
同级目录下会生成dist文件夹
使用docker部署vue项目(nginx基础之上)_第1张图片

开始用docker打包vue项目成镜像

前提你的ubuntu环境下有docker

在dist同级目录下创建Dockerfile文件进行写入:

FROM nginx

EXPOSE 80

COPY /dist /usr/share/nginx/html

ENTRYPOINT nginx -g "daemon off;"

使用docker部署vue项目(nginx基础之上)_第2张图片

进入dict目录下的cmd中
使用root模式进行docker打包镜像操作

docker build -t docker_vue .
使用docker部署vue项目(nginx基础之上)_第3张图片

出现上图所示,证明打包完成
docker images
进行查看镜像
使用docker部署vue项目(nginx基础之上)_第4张图片

使用docker命令启动镜像运行vue项目

docker run -tid -p 8888:80 docker_vue

使用8888映射80端口

Snipaste_2021-01-05_11-05-45.png

docker ps
查看运行在docker的容器
Snipaste_2021-01-05_11-07-24.png

如图所示docker已经运行容器,启动vue项目。

使用本地ip + 8888端口进行测试

ifconfig 查看本地ip
sudo ufw allow 8888 添加8888端口

使用docker部署vue项目(nginx基础之上)_第5张图片

vue项目完美运行!!

你可能感兴趣的:(docker,vue.js,nginx,ubuntu)