This topic describes how to host a static website in the Web App Service (Web+) console. A static website can use client-side technologies such as HTML, CSS, and JavaScript. A static website cannot contain dynamic content, such as server-side scripts written in Hypertext Preprocessor (PHP).

Package a static website

Package the static website to be hosted into a ZIP file.
Notice Do not package the top-level directory when you create the ZIP file.
Package a static website

Host a static website in the Web+ console

  1. Log on to the Web App Service console and select the required region in the upper-left corner of the page.
  2. On the Overview page, click Create in the upper-right corner of the Last Updated Deployment Environments section.
  3. In the Basic Information step, select Native for Tech Stack Type, configure basic information about the application, and then click Next.
    Parameter Description
    Tech Stack Type The type of the technology stack. Select a technology stack based on your business needs. In this example, select Native.
    Application Name The name of the application.
    Application Description The description of the application. This parameter is optional.
    Use Free Storage Space If you enable the Use Free Storage Space feature, uploaded deployment packages, collected logs, and diagnostic information in the lifecycle of the application are all stored in the free storage space. This minimizes storage costs. If you require a high level of data privacy, you can disable this feature. After this feature is disabled, all data is stored in your Object Storage Service (OSS) bucket.
  4. In the Environment Information step, set a name for the deployment environment and upload the deployment package. Then click Next.
    Parameter Description
    Tech Stack Version The version of the technology stack. Select a version from the drop-down list.
    Environment Name The name of the deployment environment.
    Environment Description The description of the deployment environment. This parameter is optional.
    Package Source The source of the deployment package. You can select Upload Local Application or Use Sample Application. In this example, select Upload Local Application, click Select File, and then select the deployment package to be uploaded.
    Package Version The version of the deployment package. Web+ provides a default deployment package version. You can change the default deployment package version.
    Version Description The description of the deployment package version. This parameter is optional.
  5. In the Configurations step, select Custom in the Preset Configuration field.
  6. In the architecture diagram of the Environment section, click Reverse Proxy and configure a reverse proxy.
    1. On the Reverse Proxy page, select Use custom configurations.
    2. Copy the following content to the Custom NGINX Configuration field:
      Note
      • The root command of the server parameter under http must point to the deployment directory of the static website. This directory is typically stored in /home/admin/app. The directory name website is the same as the name of the deployment package. Modify the directory information based on your business needs.
      • You can modify the NGINX configuration file based on your business needs.
      user                    nginx;
      worker_processes        auto;
      
      error_log               /var/log/nginx/error.log warn;
      pid                     /var/run/nginx.pid;
      
      worker_rlimit_nofile    32796;
      
      events {
          worker_connections  1024;
      }
      
      http {
          server_tokens off;
      
          include       /etc/nginx/mime.types;
          default_type  application/octet-stream;
      
          log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                            '$status $body_bytes_sent "$http_referer" '
                            '"$http_user_agent" "$http_x_forwarded_for"';
      
          include       conf.d/*.conf;
      
          map $http_upgrade $connection_upgrade {
              default     "upgrade";
          }
      
          server {
              listen        80 default_server;
              access_log    /var/log/nginx/access.log main;
              # The root command must point to the deployment directory of the static website. This directory is typically stored in /home/admin/app. The directory name website is the same as the name of the deployment package. Modify the directory information based on your business needs.
              root /home/admin/app/website;
      
              client_header_timeout 60;
              client_body_timeout   60;
              keepalive_timeout     60;
              gzip                  off;
              gzip_comp_level       4;
              gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
          }
      }
    3. In the lower-left corner of the Configurations step, click Create with Custom Configuration. In the Actions dialog box, confirm the change list and click Start WordPress.
  7. In the Finish step, click View environment Logs.
  8. In the Change Events dialog box, check the changes that are being made. After the changes are complete, close the Change Events dialog box.
  9. On the Environment Details page, click the URL on the right side of Public Address to access the static website.

References

Deploy native applications in Web+