Deploy a Static Website on SAE with Nginx in Minutes - Serverless App Engine

You can deploy a static website on Serverless App Engine (SAE) using its built-in Nginx environment. Simply package your static resources, such as HTML, CSS, and JavaScript files, and upload the package to SAE.

Getting started

Step 1: Create a code package

Adjust the directory structure: Make sure your static resources follow the structure below.

.
└── app
    └── index.html
    └── Other static resource files/folders

Package the project: In the directory where the app folder is located, run the following command to package all static resources into a ZIP file.
```
zip -r demo.zip app
```
Important
To ensure the code package can run on SAE, follow these rules:
- The directory that contains the static resource files must be named app. If your directory is named dist, rename it to app.
- Package only the app folder. Do not package the parent directory.

Step 2: Create an application

On the SAE Applications page, select a destination region and namespace at the top, and then click Create Application.
Select an application edition: For more information about the differences between editions, see Application editions.
Note
Lightweight Edition and Professional Edition are currently in beta testing by invitation only. If you are not part of the beta test, your application is created as a Standard Edition by default, and you do not need to select an edition.
Basic Information:
- Application Name: The name of the application. You can specify a custom name.
- Namespace Type: A namespace is similar to a Kubernetes Namespace and is used to isolate resources in different environments. You cannot change the namespace of an application after it is created. Plan your namespaces in advance.
  - Create with System Defaults: Uses the default namespace, vSwitch, and security group created by the system in the current region.
  - Select Existing Namespace: Select a namespace, vSwitch, and security group that you have already created.
- Deployment Method: Select Deploy with Code Package, and click Set Code Package Deployment.
  - Technology Stack: Select HTML.
  - Package Type: Select Deploy with ZIP Package.
  - Nginx Environment: Select an environment that is compatible with your code. For more information, see HTML - Nginx environment overview.
  - File Upload Method: Upload a local code package or enter the URL of a code package.
  - Version: Enter a version number or select Use Timestamp as Version Number.
  - Time Zone: Select the time zone for the application.
Capacity Settings:
- Resource Type: Select Default.
  Note
  Resource Type includes Default and HyGon. HyGon is currently in beta testing by invitation only. If you are not part of the beta test, Resource Type is automatically set to Default.
- Instance Type: Select the CPU and memory for each instance.
- Number of Instances: Set the initial number of instances.
Click Create Application and wait for the application to be created.

Step 3: Access the application

Next, enable external access to the application by attaching a Network Load Balancer (NLB), attaching a Classic Load Balancer (CLB), or configuring a gateway route. The following steps show how to attach an NLB.

On the SAE Applications page, select a destination region and namespace at the top. Click the Application ID of your target application to open its details page.
In the Application Access Settings section, select the Access with NLB tab and click Add NLB Access.
- Instance Source: Select Create Instance.
- Network Type: Select Public Network.
- vSwitch: Specify the zone and vSwitch for the NLB instance.
  Note
  For high availability, select at least two zones and vSwitches.
  If no vSwitches are available, click Create to create one. After the vSwitch is created, click the refresh icon next to the field and select the new vSwitch.
- Protocol Type: Select TCP.
- Listening Port: The port that receives requests and forwards them to backend servers. This port is customizable. In this example, the port is set to 80.
- Container Port: The port that the process listens on, defined by the program. For the SAE Nginx environment, the default port is 80.
Click OK and wait for the creation to complete.
Verify the result:
1. Click the ID of the created NLB instance to open its details page. In the Zone section, find the Elastic IP Address of the NLB instance.
2. Access the application in a browser. The URL format is http://<Elastic IP Address>:<Listening Port>.

Advanced settings

When you create and deploy an application, you can configure the following advanced features as needed.

Runtime environment and lifecycle management

You can use environment variables, host bindings, injected configurations, and injected secrets to change variables or configuration files in the runtime environment after deployment without rebuilding the image.
Use health checks to monitor whether application instances are running properly and ready to handle requests. Unhealthy instances are automatically restarted, and traffic is not routed to an instance until it is ready.
Use application lifecycle management to define custom commands that run after the application starts and before it stops, and to enable graceful shutdown.

Application access and traffic management

Use service registration and discovery to enable service invocation between applications.
Enable external access to the application by attaching an NLB, attaching a CLB, or configuring a gateway route.
Enable the application to actively access external resources or services by configuring a NAT Gateway or attaching elastic IP addresses (EIPs) to application instances.

Data persistence

Store application data in NAS, OSS, or a database to prevent data loss when the application is changed or stopped.

Logging and monitoring

After you deploy an application, you can view real-time logs and monitor resource usage and load without any extra configuration. You can also export logs to Simple Log Service (SLS) or Kafka for centralized management and analysis.
Application Real-Time Monitoring Service (ARMS) monitoring helps you understand the running status of your application. You can use it to quickly locate faulty and slow APIs, identify performance bottlenecks, and reproduce call parameters to improve the efficiency of online issue diagnosis.
- For Standard Edition applications, you can view basic ARMS monitoring data after deployment without any extra configuration. You can also activate and purchase ARMS Pro monitoring.
- For Professional Edition applications, enable Application Monitoring in the Advanced Settings. After the application is deployed, you can view ARMS Pro monitoring data at no extra cost.

Microservice administration

Microservice administration enables lossless online and offline deployment, traffic protection, end-to-end canary release, and zone-aware routing for Java applications.

For Standard Edition applications, go to the application details page after deployment to activate and purchase the MSE Microservice Administration feature.
For Professional Edition applications, enable Microservice Administration in the Advanced Settings to configure lossless online and offline deployment. You can configure more features on the application details page after deployment at no extra cost.

Other features

Use the CPU Burst feature (for Standard and Professional Editions only) to reduce resource waste caused by high CPU requirements during startup.
Use a Sidecar container to decouple and standardize non-business functions from the main container.