VUE 项目部署到服务器
一、在本地先打包好项目
运行一下代码在本地打包好!
//构建打包项目
npm run build
二、把打包出来的项目 文件夹 dist 和其他文件一起上传到服务器
- 注意: 不需要上传 node_modules 这个文件夹
- 也可以上传到 github 在下载到服务器这样也很快
# 文件地址
git clone https://gitee.com/ice_infinite/VUE.git
文件结构:
三、服务器上要有 docker 和 node 环境
-
自己安装docker
-
在docker里面拉取 nginx 和 node 镜像
# 输入命令,默认拉取最新版,前提是已安装docker docker pull nginx docker pull node
四、在项目根目录下创建Dockerfile
- 先进入项目根目录,创建Dockerfile
touch Dockerfile
- Dockerfile配置文件内容:
FROM nginx
EXPOSE 80
COPY /dist /usr/share/nginx/html
- 构建镜像
# -t 是给镜像取名。
# 最后有一个点 “.”,表示使用当前路径下的 dockerfile 文件,也可以指定使用其它路径的。
docker build -t vue-app .
查看新生成的镜像:
docker images
五、启动容器
docker run -p 8080:80 vue-app
最后访问页面:http://地址:8080/ 出现画面!
六、绪章
实现自启:
- 要实现长期启动 Docker 容器:
docker run -d -p 8080:80 --restart always vue-app
添加了 -d 参数后,容器将在后台运行。–restart always 参数将在 Docker 服务启动时自动启动这个容器,并且如果容器意外停止,也会自动重新启动。
- 停止服务
docker stop vue-app
- 查看 docker创建的 容器
#查看正在运行的
docker ps
#查看全部的,包括没有运行的
docker ps -a