Serverless App Engine:Deploy an Nginx service using SAE

Solution overview

As shown in the following figure, Nginx can return static resources, such as HTML pages, from the application itself or forward requests to other backend applications based on the URI of the client request. Nginx then returns the response to the client.

You can also deploy an Nginx service to build only a static website. In this scenario, you do not need to deploy a backend application or include forwarding rules in your Nginx configuration.

1. Prepare static website resources

This topic uses the following sample file: nginx-demo.zip.

The html/ folder contains the static website resources used in this example:

• index.html: The default index page.

• error.html: The default 404 error page.

In a production environment, you can create static website resources, such as HTML pages, images, and CSS styles, as needed.

2. Write the Nginx configuration file

The conf/ folder in the example contains the Nginx configuration file nginx.conf. The following sections describe the configuration.

In a production environment, you can modify the Nginx configuration file based on your requirements. For more information, see the official Nginx documentation.

Configure static resource access rules

...
    server {
        listen       80 default_server; # Set the listener port for the web service to 80.
        ...
        root         /usr/share/nginx/html;
        include /etc/nginx/default.d/*.conf;

        # The page to return when a client accesses the root path.
        location / {
            root /usr/share/nginx/html; # The path in the container where static website resources are stored. When you build the image, the local static website resources are copied to this path in the image.
            index index.html;
        }

        # The page to return when a client encounters a 404 error.
        error_page 404 /error.html;
        location = /error.html {
            root /usr/share/nginx/html;
        }
    }
...

Configure forwarding rules

This section assumes you have deployed a backend application that is accessible from the Internet.

In this example, the endpoint and port of the backend application are 121.40.xx.xx:80. To forward requests with URIs that match /api/* to the backend application and rewrite the URI path to /*, use the following configuration:

...
        # Configure request forwarding rules.
        location /api/ {
            proxy_pass http://121.40.xx.xx:80/;
        }
...

If you only want to build a static website, you do not need to configure forwarding rules.

If the deployed Nginx service can access the backend application over a Virtual Private Cloud (VPC) network, you can use a private IP address in the forwarding rule.

3. Build an image and upload it to an image repository

You can build the image in your local environment or on an Elastic Compute Service (ECS) instance. Make sure Docker is installed in the environment.

1. Write a Dockerfile. The following code shows a sample Dockerfile:

   # Specify the Nginx base image.
   FROM nginx:1.20.2
   
   # Copy the local Nginx configuration file to the specified path in the container environment.
   COPY conf/nginx.conf /etc/nginx/nginx.conf
   
   # Copy the local static resource files to the specified path in the container environment.
   COPY html /usr/share/nginx/html

2. Build the image. Run the following command in the directory where the Dockerfile is located:

   docker build . -t my-nginx:1.0
   # .: Builds the image in the current directory.
   # -t: Specifies the image name and tag.

3. Test the image.

   # Run the image.
   docker run -d -p 80:80 my-nginx:1.0
   
   # The curl command must be installed in the environment.
   # Test static resource access.
   curl localhost:80/
   # Test forwarding requests to the backend application. This applies only when the Nginx service forwards requests to the backend application using a public IP address.
   curl localhost:80/api/

4. Push the image to an Alibaba Cloud Container Registry (ACR) image repository. For more information, see Push and pull images (Enterprise Edition) or Push and pull images (Personal Edition).

4. Deploy Nginx from the image and configure network access

1. Deploy the Nginx service from the image that you pushed to ACR. For more information, see Deploy an application from an image.

2. If you want the Nginx service to forward requests to the public endpoint of the backend application, configure an Internet NAT gateway for the VPC where the Nginx service resides. By default, applications deployed in SAE cannot access the Internet. For more information, see Configure an Internet NAT gateway to enable SAE applications to access the Internet.

   If the Nginx service uses the private endpoint of the backend application to forward requests, you do not need to configure a NAT gateway.

3. Configure a public endpoint for the Nginx service so that clients can access the service using a public IP address. For more information, see Attach a CLB instance to an application to generate a public or private endpoint. Set Container Port to 80.

   If you want clients to access the Nginx service through a domain name, configure domain name resolution for the public IP address.

4. Access the Nginx service from a browser to test it.

5. (Optional) Modify the Nginx configuration file after deployment

To modify the Nginx configuration file, you do not need to rebuild the image. You can use a ConfigMap to inject the configuration file into the container for efficient configuration management.

1. Create a configuration item (ConfigMap) in the namespace of the Nginx application. For more information, see Create a configuration item (ConfigMap). Set Configuration Item Name to nginx. Add a variable with the key nginx.conf and set its value to the content of the modified configuration file.

   

2. Inject the configuration file using the ConfigMap and redeploy the application. For more information, see Inject configurations. For Configuration Item, select the nginx ConfigMap that you created in the previous step. For Key, select nginx.conf. Set Mount Path to /etc/nginx/nginx.conf. This path is the location of the Nginx configuration file in the image.

   

3. After the application is deployed, use WebShell to log on to a specific application instance and verify that the configuration file was modified.