Edge Security Acceleration:Create Pages by importing a GitHub repository

Prerequisites

• You have activated Functions and Pages.

• You have an active GitHub account and a code repository.

Procedure

Pages integrates seamlessly with GitHub to synchronize your development workflow and deployment.

1. Log on to the ESA console. In the navigation pane on the left, choose Edge Computing > Functions and Pages.

2. On the Functions and Pages page, click Create.

3. Select the Import GitHub Repo tab, and then click Add GitHub Accounts.

   

4. Log on to your GitHub account. On the authorization page, select All repositories and click Install & Authorize to grant repository authorization.

5. Select the repository that you want to build and click Next.

   

6. Enter the build information and click Start Deploy.

   

   Type	Item	Description
   Basic configuration	Prod (Production branch)	The default branch is main. ESA automatically triggers a build and deploys it to the production environment based on the selected branch.
   	Non-prod (Non-production branch)	If you enable this feature, a build is generated for new commits to non-production branches, such as branches other than the main branch, but it is not automatically deployed.
   	Installation command	Enter the command to install dependencies, such as npm install. The npm, yarn, cnpm, and pnpm package managers are supported.
   	Build (Build command)	Enter the command to build the project, such as npm run build. The npm, yarn, cnpm, and pnpm package managers are supported.
   Advanced configuration	Root directory	The build command is executed in this directory. The default is /. If you are using a monorepo, enter the path of the subproject to build, such as /frontend or /packages/web.
   	Static resource directory	The directory in the build output that hosts static assets. Examples: ./public, ./dist, or ./build. You can specify the static resource directory in the assets.directory field of the esa.jsonc file. This configuration has a higher priority than the configuration in Build Information and overwrites the configuration here.
   	Function file path	The path of the function's entry file, which is the file that is actually executed. For example: ./src/index.ts. You can specify the function file path in the entry field of the esa.jsonc file. This configuration has a higher priority than the configuration in Build Information and overwrites the configuration here.
   	Node.js version	The Node.js version used for the build. You must trigger a new build for any change to take effect. You can specify the major Node.js version in the engines.node field of the package.json file. This configuration has a higher priority than the configuration in Build Information and overwrites the configuration here.
   	Environment variable	Set environment variables that can be used during the build process. You can access them through the global object process.env.

7. After the build is complete, a public domain name is generated. Use this domain name to preview the Page.

   

   

Bind a custom domain name

After you create the Page, add your website to ESA. Then, add the public access link as a DNS record for your domain name. This lets you access the Page using your custom domain name.

1. Click Associate Domain Name to bind a domain name from your website to the Page so that the Page can be accessed.

   

2. On the Domain Names page, bind a custom domain name by configuring a Custom Domains or a Routes rule.

   Domain name

   Bind the public URL of your Page to your website's domain name. Use the domain name to access the Page.

   1. In the Domains section, click Add Domain Name.

   2. Enter the custom domain name that you want to bind, such as page.example.com, and click OK.

   Route

   Map specific URLs to Pages using route. For example, if you configure a routing rule example.com/a* for example.com, all requests for paths that match the rule, such as /a, /a1, and /a2, are processed by Pages. Other requests for paths that do not match the rule will be sent to the cache or origin.

   

   1. In the Routes section, click Add Routes.

   2. Enter a Route Name, such as Pages. From the Select Website list, select the target website, such as example.com. Simple Mode is selected by default. Configure the prefix and suffix for the route as needed. The following are some examples:

      • Example 1: If you set the route to *.example.com/*, any request sent to http://pages.example.com/ or http://example.com/ is forwarded to Pages.

      • Example 2: If you set the route to example.com/a*, any request sent to http://example.com/a, http://example.com/a1, or http://example.com/api is forwarded to Pages.

      • Example 3: If you set the route to pages.example.com/api/*, any request sent to http://pages.example.com/api/ and its subpaths, such as http://pages.example.com/api/users or http://pages.example.com/api/products/123, is forwarded to Pages.

      

      Note

      • If the route you enter is a domain name with a prefix, such as *.example.com or pages.example.com, you must also manually add a record to the DNS records in ESA. Otherwise, access will fail.

      • If multiple rules are configured, they are matched from top to bottom. Once a rule is matched, the system stops processing and does not check the remaining rules.

3. For domain names added using NS records, a DNS record is automatically added for the Page. For domain names added using a CNAME record, a CNAME value is automatically generated. Manually add a CNAME record at your DNS provider.

4. In a browser, access the custom domain name to view the Page.