vue.js项目部署到服务器docker容器上

vue.js项目部署到服务器docker容器上

网上看到大部分都是使用nginx镜像通过反向代理进行部署，但是我试过很多遍都没有部署成功，后面使用了node镜像部署。总结一下我使用node部署的步骤，如下：

我这里vue项目名为bigdata，是通过远程服务器的docker进行部署,保存的目录在/root/vue/下

1、把项目bigdata通过xftp传到/root/vue目录下

2、拉取node镜像

#下载node镜像
docker pull node:alpine
#查看镜像
docker images

3、进入bigdata目录

cd /root/vue/bigdata

4、运行镜像容器并挂在到bigdata目录，便于打包环境

docker run --name vue -itd -v /root/vue/bigdata:/root/vue/bigdata -p 8000:8000 node:alpine

#--name 是设置容器的名称，这里是vue
# -p 端口映射，外部端口：内部端口

5、进入vue容器，然后进入bigdata目录

docker exec -it vue sh   #vue是容器名
cd /root/vue/bigdata

6、运行之前查看有没有安装npm和node，可通过查看版本

node  -v   
npm  -v

7、没问题之后，在这个目录下运行vue项目

npm run dev

启动监听成功，端口8000

正常访问的ip是http://localhost:8000,内部服务器就可以访问，但是外部会访问不了，原因有两种情况：
第一种：访问地址、端口与服务器没有做映射
第二种：做了地址映射也访问不了，是因为node在docker里面没办法解析localhost的域名

解决方法：（前提是已经做了地址映射）

1、在bigdata项目的index.js文件，修改host为0.0.0.0

2、重新上传改好的项目，覆盖掉原来的项目
3、需要停止掉原来的创建的容器，然后删除旧的容器

#停止容器
docker stop vue
#删除容器
docker rm vue

4、重新创建容器，运行，步骤上面已有

5、如果出现以上报错:Permission denied的权限问题
执行下面两条命令

npm install webpack -g
npm install webpack-dev-server -g

6、运行

npm run dev

这样就可以通过ip+8000端口访问vue项目了