docker nginx 部署 vue项目

一、vue项目编译打包

1、更新node更新库

2、编译打包

npm run build

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

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

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

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

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

处理方式

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

b、安装 淘宝镜像 （cnpm）

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

e、安装相关依赖

e-1、安装vue脚手架

sudo cnpm install -g vue-cli

e-2、安装项目依赖

cnpm install　

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

cnpm install vue-router vue-resource --save

e-4、启动项目

npm run dev或cnpm run dev

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

1、安装最新的nginx

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

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

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

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

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

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

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配置

6、查看启动结果

7、访问静态资源