VUE 项目部署到CentOS8服务器

VUE 项目部署到服务器

一、在本地先打包好项目

运行一下代码在本地打包好！

//构建打包项目
npm run build

二、把打包出来的项目 文件夹 dist 和其他文件一起上传到服务器

• 注意： 不需要上传 node_modules 这个文件夹
• 也可以上传到 github 在下载到服务器这样也很快

# 文件地址
git clone https://gitee.com/ice_infinite/VUE.git

文件结构：

三、服务器上要有 docker 和 node 环境

• 自己安装docker

  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