Deployment Guide

Basic Configuration

Deployment configuration display

Project Information

Before starting deployment, you need to fill in the following configuration items:

| Configuration Item | Description | Example | Required |\n|--------|------|------|----------|\n| Project Name | Custom project name to identify the deployment project | my-project | Yes |\n| Project Framework Preset | Select the frontend framework used by the project | React, Vue, Angular | Yes |\n| Node.js Version | Select the Node.js version to use during build | Node.js 18 | Yes |\n| Target Directory | Directory where the code to be built is located, leave empty to default to root directory | /frontend | No |

Build and Deployment Configuration

Configuration Item	Description	Example	Required
Install Command	Command to install project dependencies	npm install	Yes
Build Command	Command to compile and build the project	npm run build	Yes
Build Output Directory	Output directory after build completion	./dist	Yes
Deployment Path	Path to deploy to the server, defaults to root path /	/ or /app	No

Configuration Notes

• Target Directory: If your frontend code is in a subdirectory of a monorepo project, you can specify the directory path
• Build Output Directory: Path relative to the project root directory or target directory, usually dist, build, etc.
• Deployment Path: Specifies the access path of the website on the server, defaults to generating a relative path based on the project name, e.g., /my-project

Supported Node.js Versions

The system supports the following Node.js versions:

• Node.js 16
• Node.js 18
• Node.js 20
• Node.js 22
• Node.js 24

Version Selection Recommendation

It is recommended to select the same Node.js version as your local development environment to avoid build issues caused by version differences.

Configuration Examples

React Project (Vite):

Project Name: my-react-app
Project Framework Preset: React
Node.js Version: Node.js 18
Target Directory: (leave empty)
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./dist
Deployment Path: /my-react-app

Vue Project (Vue CLI):

Project Name: my-vue-app
Project Framework Preset: Vue
Node.js Version: Node.js 18
Target Directory: (leave empty)
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./dist
Deployment Path: /my-vue-app

Advanced Configuration

Environment Variables

Supports configuring environment variables during build, commonly used to distinguish development/production environments:

# Example
NODE_ENV=production
VITE_API_URL=https://api.example.com
REACT_APP_ENV=production

Target Directory Description

The target directory is used to specify the location of the code to be built, suitable for the following scenarios:

1. Monorepo Projects: Frontend code is in a subdirectory

   Target Directory: /packages/web

2. Multi-application Projects: Project contains multiple applications

   Target Directory: /apps/admin

3. Separate Frontend Directory: Frontend code is in a separate folder

   Target Directory: /frontend

Note

If the project code is in the root directory, please leave the target directory empty or fill in /

Common Frontend Framework Deployment Configuration

React

Create React App

# Install command
npm install

# Build command
npm run build

# Build output directory
./build

package.json Example:

{
  "scripts": {
    "build": "react-scripts build"
  }
}

Console Configuration:

Project Framework Preset: React
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./build

Vite + React

# Install command
npm install

# Build command
npm run build

# Build output directory
./dist

vite.config.js Configuration:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/', // If deploying to a subdirectory, modify this item
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

Console Configuration:

Project Framework Preset: React
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./dist

Vue

Vue CLI (Vue 2/3)

# Install command
npm install

# Build command
npm run build

# Build output directory
./dist

vue.config.js Configuration:

module.exports = {
  publicPath: '/', // Deployment path
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false
}

Console Configuration:

Project Framework Preset: Vue
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./dist

Vite + Vue

# Install command
npm install

# Build command
npm run build

# Build output directory
./dist

vite.config.js Configuration:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/',
  build: {
    outDir: 'dist'
  }
})

Console Configuration:

Project Framework Preset: Vue
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./dist

Angular

# Install command
npm install

# Build command
npm run build

# Build output directory
./dist/project-name

angular.json Configuration:

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-project"
          }
        }
      }
    }
  }
}

Console Configuration:

Project Framework Preset: Angular
Install Command: npm install
Build Command: npm run build
Build Output Directory: ./dist/your-project

Tip

The output directory of Angular projects usually includes the project name, please adjust according to the actual project configuration.

Deployment Path Configuration

Root Path Deployment

If the website is deployed at the domain root path (such as https://example.com/), keep the deployment path at the default value /.

File Overwrite Risk Warning

Root path deployment will deploy build artifacts directly to the root directory / of static hosting, which means:

1. Existing files will be overwritten: Files in the root directory with the same name as the build artifacts will be overwritten by newly deployed files
2. Multi-project conflicts: If multiple projects are deployed to the root path in the same static hosting environment, later deployed projects will overwrite files from previous projects
3. Cannot rollback individual files: Overwritten files cannot be automatically recovered

Recommended Practices:

• If deploying multiple projects in the same static hosting environment, assign each project an independent subpath (such as /app1, /app2)
• It is recommended to validate in a test environment before production deployment
• It is recommended to back up existing files before deploying important projects

Root Path Deployment Use Cases

Root path deployment is suitable for the following situations:

• Single application, exclusively occupying the entire static hosting environment
• Official websites, product homepages, and other scenarios that require direct domain access
• Situations where conflicts with other projects have been confirmed not to occur

Subpath Deployment

If the website is deployed on a subpath (such as https://example.com/app/), you need to:

1. Configure in Console: Set the deployment path to /app
2. Set base path in project configuration:

Vite Projects

// vite.config.js
export default defineConfig({
  base: './', // Use relative path to solve resource loading issues during static hosting deployment
  // ... other configurations
})

Vue CLI Projects

// vue.config.js
module.exports = {
  publicPath: './', // Use relative path to solve resource loading issues during static hosting deployment
  // ... other configurations
}

Create React App

// package.json
{
  "homepage": "./" // Use relative path to solve resource loading issues during static hosting deployment
}

Angular Projects

// angular.json
{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "./" // Use relative path to solve resource loading issues during static hosting deployment
          }
        }
      }
    }
  }
}

Note

The deployment path configuration must be consistent with the base/publicPath/homepage in the project configuration file, otherwise resource loading will fail.