企业官网建设流程全解析

如何快速部署openEuler/website-v2：前端与后端工程完整指南

【免费下载链接】website-v2仓库关闭的原因：https://gitee.com/openeuler/community/pulls/4124项目地址: https://gitcode.com/openeuler/website-v2

前往项目官网免费下载：https://ar.openeuler.org/ar/

openEuler/website-v2是openEuler社区的官方网站项目，包含前端和后端工程，通过Docker容器化部署可以快速搭建完整的网站服务。本文将详细介绍从环境准备到容器运行的全流程，帮助新手用户轻松完成部署。

📋 部署前准备工作

在开始部署前，请确保你的系统满足以下条件：

• 已安装Docker和Docker Compose
• 网络连接正常（需要拉取Docker镜像和依赖包）
• 至少2GB可用内存和10GB磁盘空间

克隆项目代码

首先需要获取项目源代码，执行以下命令克隆仓库：

git clone https://gitcode.com/openeuler/website-v2 cd website-v2

🔧 后端服务部署

后端服务基于Node.js构建，使用Docker容器化部署，主要提供API接口和数据处理功能。

后端Dockerfile解析

后端Dockerfile位于server/Dockerfile，主要包含以下关键步骤：

• 使用openeuler/node:10.21.0-20.03-lts-sp1作为基础镜像
• 安装项目依赖：RUN npm install
• 暴露8090端口：EXPOSE 8090
• 启动命令：CMD ["start"]，对应package.json中的"start": "node ./bin/www"

构建并启动后端容器

cd server docker build -t openeuler-website-backend . docker run -d -p 8090:8090 --name website-backend openeuler-website-backend

🎨 前端服务部署

前端服务采用VuePress构建，包含网站页面和静态资源，通过Nginx提供服务。

前端Dockerfile解析

前端Dockerfile位于web-ui/Dockerfile，构建过程分为两个阶段：

1. 构建阶段：使用node:alpine镜像，执行npm install安装依赖，npm run build构建静态文件
2. 运行阶段：使用Nginx镜像（swr.cn-north-4.myhuaweicloud.com/opensourceway/openeuler/nginx:1.22.0-22.03-lts），暴露8080端口

openEuler网站部署架构示意图

构建并启动前端容器

cd web-ui docker build -t openeuler-website-frontend . docker run -d -p 8080:8080 --name website-frontend openeuler-website-frontend

🔗 前后端连接配置

前端需要正确配置后端API地址才能正常工作，配置文件位于server/config/apiConfig.js，可以根据实际部署情况修改API接口地址。

✅ 部署验证

完成前后端部署后，可以通过以下步骤验证服务是否正常运行：

1. 访问前端服务：打开浏览器访问 http://localhost:8080
2. 检查后端API：使用curl命令测试API接口

   curl http://localhost:8090/api/health

3. 验证页面内容：浏览网站首页和各功能模块，确保内容加载正常

openEuler网站首页展示

📝 常见问题解决

端口冲突问题

如果启动容器时提示端口已被占用，可以修改端口映射：

# 后端端口修改示例 docker run -d -p 8091:8090 --name website-backend openeuler-website-backend # 前端端口修改示例 docker run -d -p 8081:8080 --name website-frontend openeuler-website-frontend

依赖安装失败

如果构建过程中npm install失败，可以尝试更换npm源：

# 在Dockerfile中添加npm源配置 RUN npm config set registry https://registry.npm.taobao.org

容器启动后无法访问

检查容器运行状态：

docker ps -a # 查看容器日志 docker logs website-backend docker logs website-frontend

🚀 部署优化建议

对于生产环境部署，建议：

1. 使用Docker Compose管理多容器应用
2. 添加健康检查和自动重启机制
3. 配置Nginx反向代理和HTTPS
4. 实现数据持久化和定期备份

通过以上步骤，你已经成功部署了openEuler/website-v2项目的前端和后端服务。如果需要进一步定制或扩展功能，可以参考项目中的文档和源码进行修改。

【免费下载链接】website-v2仓库关闭的原因：https://gitee.com/openeuler/community/pulls/4124项目地址: https://gitcode.com/openeuler/website-v2