docker nginx 部署 vue项目

简介: docker nginx 部署 vue项目

一、vue项目编译打包


1、更新node更新库

image.png

2、编译打包

npm run build

image.png

该问题的原因是 之前项目代码是在windows环境编译的 现在是在mac环境编译 所以需要下载相应操作系统的编译库

image.png


image.png

编译成功之后 会生成一个dist文件夹

image.png

里面的内容就是即将部署到nginx的静态资源

3、如果想直接启动vue项目

image.png

启动的时候 如果报webpack-dev-server: Permission denied错误

处理方式

a、获取nodejs模块安装目录访问权限 (必须执行)

image.png

b、安装 淘宝镜像 (cnpm)

image.png

c、cnpm -v 如果报sudo: cnpm: command not found

说明此时需要配置下cnpm的环境变量

vim  ~/.bash_profile

export PATH=/Users/mengfanxiao/nodejs/npm_global/bin:$PATH

source ~/.bash_profile

d、sudo cnpm install webpack-dev-server -g

image.png

e、安装相关依赖

e-1、安装vue脚手架

sudo cnpm install -g vue-cli

image.png

e-2、安装项目依赖

cnpm install 

image.png

e-3、安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

image.png

e-4、启动项目

npm run devcnpm rundev



二、将vue项目部署到docker nginx并实现访问


1、安装最新的nginx

image.png

2、先简单nginx运行起来,方便后面我们拷贝容器内部的nginx配置文件

image.png

3、将容器中的配置文件复制到宿主机上 普通方式搭建的nginx只需要关注nginx.conf配置文件 docker方式搭建的 需要关注2个配置文件 nginx.conf和default.conf

image.png

docker cp ed2f9784a0eb:/etc/nginx/nginx.conf ~/nginx/conf/

docker cp ed2f9784a0eb:/etc/nginx/conf.d/default.conf ~/nginx/conf.d/

4先停止容易 再删除容器 重新启动 (防止端口冲突 修改了下默认端口为7000)

image.png

5、将静态文件放在location指定的目录下

image.png


6、启动容器

docker run -d --name nginx1 -p 7000:7000 -v /Users/mengfanxiao/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /Users/mengfanxiao/nginx/html:/Users/mengfanxiao/nginx/html -v /Users/mengfanxiao/nginx/logs:/var/log/nginx -v /Users/mengfanxiao/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx


-d 后台启动

-name 容器名称

-p宿主机端口7000 指向容器中端口7000

第一个-v表示将宿主机中的nginx.conf替换调容器中的nginx.conf

第二个-v表示将宿主机中的静态资源文件替换调宿主机中的静态资源文件

第三个-v表示容器中的日志也写到宿主机上方便查看日志

第四个-v表示宿主机上的default.conf配置替换掉容器中的default.conf配置


image.png

6、查看启动结果

image.png


7、访问静态资源

image.png

相关文章
|
5天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
|
5天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
11 1
|
5天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
|
5天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
|
5天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
|
7天前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
40 3
|
7天前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
7天前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
7天前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
|
7天前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。