docker

关注公众号 jb51net

关闭
首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > docker打包前端并运行

docker如何打包前端并运行完整步骤详解

作者:Jack_Kuo

这篇文章主要介绍了使用Vue3和Vite1开发前端项目的过程,包括项目启动、开发服务器运行、构建生产环境以及使用Docker部署,文中通过代码介绍的非常详细,需要的朋友可以参考下

前端使用 Vue 3 + Vite

1.use npm run preview 运行

0.项目根目录下新建.env文件

VITE_BASE_API_prod=http://127.0.0.1:5000/api # 线上环境
VITE_MOCK_API_prod=api                       # 本地模拟数据                       
VITE_BASE_API_dev=http://127.0.0.1:5000/api  # 开发环境
VITE_MOCK_API_dev=api                        # 本地模拟数据

1. 确保安装依赖

在项目的根目录下,确保你已经安装了所有的依赖包。运行以下命令来安装:

node -v

v20.18.0

npm install

2. 运行开发服务器

运行以下命令启动开发服务器:

npm run dev

这将执行 package.json 文件中定义的 dev 脚本。通常情况下,这会启动一个本地的开发服务器(如 Webpack Dev Server、Vite、Next.js 等),并监听你项目中的源代码文件。一旦你做出修改,开发服务器通常会自动重新加载页面。

3. 访问开发环境

开发服务器通常会启动在本地某个端口上(常见的是 localhost:5173 ),你可以在浏览器中输入相应地址访问你的应用。

具体的端口号可以在命令行中看到,或者在 package.json 中查看 dev 脚本的配置。

4. 构建生产环境

npm run dev
npm run build
npm run preview

到此为止,就会在当前目录下阐述静态资源dist文件夹。

2.docker 运行

将前端资源编译打包并交付给平台基建组,主要涉及以下步骤:

1. 编译和打包前端资源

2. 配置 Nginx

2.1 创建 Nginx 配置文件

为前端项目配置 Nginx。新建一个 Nginx 配置文件,例如 my-vue-app.conf,内容如下:

server {
    listen 80;
    server_name your.domain.com; # 替换为实际的域名或 IP 地址

    root /usr/share/nginx/html; # 指定静态资源的路径
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_page 404 /index.html;

    # 可选:配置 gzip 压缩
    gzip on;
    gzip_types text/plain application/javascript text/css application/json;
}

2.2 确保目录一致

在配置文件中,root 指定的路径是 Nginx 用来加载前端资源的目录。比如 /usr/share/nginx/html

3. 将前端资源放入 Nginx 镜像

4. 将镜像交付给平台基建组

5. 平台基建组的操作建议

基建组拉取镜像后,可以使用以下命令部署镜像:

docker pull jackkuo666/amp_seminer_portal_frontend-nginx:v1
docker run -d -p 80:80 --name amp_seminer_portal_frontend-nginx jackkuo666/amp_seminer_portal_frontend-nginx:v1

如果在 Kubernetes 环境下运行,建议基建组编写一个 Deployment 和 Service 配置文件,以便进行集群内的部署。

6. 总结

通过这种方式,前端项目可以高效地交付和运行在生产环境中。

到此这篇关于docker如何打包前端并运行文章就介绍到这了,更多相关docker打包前端并运行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文