利用docker 镜像部署前端vue工程

最新推荐文章于 2024-05-30 11:18:27 发布

原创

最新推荐文章于 2024-05-30 11:18:27 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何使用Docker部署一个Vue前端工程。首先，修改项目代码中的API请求地址以匹配服务器IP。接着，将项目代码上传至服务器并安装Node.js。在项目根目录下构建并打包项目，生成dist文件夹。然后，下载nginx镜像，创建nginx配置文件，并编写Dockerfile。最后，构建Docker镜像并启动容器，通过访问服务器IP的指定端口完成部署。

首先在部署环境前，我们需要查看下项目代码的api.js里面请求的后端地址，先进行更改，比如你准备在服务器ip为：11.22.33.44上部署环境，那么你的请求地址要先改好，然后再开始部署操作

我们将项目代码上传到服务器上比如项目代码目录名叫:test
在服务器上安装node.js,具体安装步骤详见上一篇博客。
安装完成后我们就进入到项目根目录test下开始构建项目

npm install -g @vue/cli       #安装脚手架
npm install						 #安装依赖
npm run build					#构建打包

打包完成后我们会在项目根目录test下生成一个dist文件夹
在这里插入图片描述
到此我们就将项目已经打包好，接下来开始部署准备

下载nginx镜像

docker pull nginx

创建 nginx config配置文件

vi nginx config

内容如下

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip，比如我之前说的11.22.33.44

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.htm

最低0.47元/天解锁文章