Docker环境下的前后端分离项目部署（三）前端部署和Linux基本操作

Docker环境下前后端分离项目的前端部署主要涉及前端项目下载、配置、运行及打包，同时需掌握Linux基本操作以完成部署环境准备与文件管理，CentOS7防火墙配置则用于保障服务安全访问。 以下是具体步骤与操作说明：

• 下载前端项目源码：从GitHub等代码托管平台获取项目，例如：
  https://github.com/renrenio/renren-fast-vue/tree/1e923019dc6b2025db24638d86d2990f7d520a55
  

• 安装NodeJS：需提前安装Node.js环境（具体版本根据项目要求选择），可通过官方文档或包管理器完成。
• 安装依赖包：进入项目目录后，使用cnpm install（或npm install）安装依赖。cnpm install
• 运行项目：通过npm run dev启动开发环境，访问指定端口（如
  http://localhost:8080
  ）验证是否成功。npm run dev
  

• 生产环境打包：使用npm run build生成静态文件（通常位于dist目录），这些文件将作为Docker镜像的静态资源。npm run build
• Docker镜像构建：编写Dockerfile，将静态文件复制到Nginx容器中，例如：FROM nginx:alpineCOPY dist /usr/share/nginx/htmlEXPOSE 80构建镜像并运行容器：docker build -t frontend-image .docker run -d -p 80:80 frontend-image

• Linux目录结构：根目录（/）下包含bin（命令）、etc（配置）、home（用户目录）、var（日志）等核心目录。
  

• 常用命令：

  文件操作：

  ls：列出目录内容。

  mkdir：创建文件夹（如mkdir /app）。

  touch：创建文件（如touch /app/index.html）。

  cp：复制文件或目录（如cp -r /source /target）。

  rm：删除文件或目录（-r递归删除，-f强制删除）。

  mv：移动或重命名文件（如mv /old /new）。

  权限管理：

  ls -l：查看文件属性（包括权限、所有者）。

  chmod 777：修改文件权限（如chmod 777 /app赋予所有用户读写执行权限）。

  

  adduser与passwd：添加用户并设置密码（如adduser deploy、passwd deploy）。

• 防火墙状态管理：

  查看状态：firewall-cmd --state

  启动/关闭：

  systemctl start firewalld.service # 启动systemctl stop firewalld.service # 关闭

  重启：systemctl restart firewalld.service

• 端口开放与移除：

  开放端口（如8080-8085）：

  firewall-cmd --permanent --add-port=8080-8085/tcpfirewall-cmd --reload # 重新加载配置

  移除端口：

  firewall-cmd --permanent --remove-port=8080-8085/tcpfirewall-cmd --reload

  查询开放端口：firewall-cmd --permanent --list-ports

1. 环境准备：

   在Linux服务器上安装Docker、Node.js及Nginx。

   配置防火墙开放前端服务端口（如80）。

2. 前端部署：

   打包项目并构建Docker镜像。

   运行容器并映射端口：

   docker run -d -p 80:80 frontend-image
3. 验证访问：

   通过浏览器访问服务器IP，确认前端页面正常加载。

通过以上步骤，可完成Docker环境下前后端分离项目的前端部署，并掌握Linux基础操作与防火墙配置，确保服务安全稳定运行。