Deploying a WeChat Mini Program Photo Album Demo with Tencent Cloud COS

WeChat Mini Programs, launched by Tencent on January 9, 2017, are lightweight applications that run inside the WeChat ecosystem without requiring installation. By March 2018 the user base exceeded 400 million, with mini‑game programs accounting for 28 % of the market.

This tutorial guides readers from zero to one in deploying a Mini Program demo that integrates tightly with a backend service, using the "Small Photo Album" example built on Tencent Cloud Object Storage (COS).

Choosing the Demo

The demo is the "Small Photo Album" project, which combines a front‑end Mini Program package ( applet ) and a Node.js backend server ( server ) that provides CGI interfaces for listing, uploading, and deleting images stored in COS.

Project Structure

applet : Mini Program source code that can be opened directly in the WeChat Developer Tools.

server : Node.js service that communicates with the Mini Program and COS.

Setting Up the Development Environment

1. Apply for a Mini Program account at https://mp.weixin.qq.com/wxopen/waregister?action=step1 . After registration you will obtain an AppID.

2. Install the WeChat Developer Tools . Download the appropriate installer for your OS (e.g., Windows 64‑bit) and run it with administrator privileges.

3. Create the "Small Photo Album" project by cloning the official repository:

https://github.com/CFETeam/weapp-demo-album.git

Open the app directory in the Developer Tools, select the downloaded folder, enter the AppID, and name the project (e.g., "Small Photo Album").

Domain and Certificate Preparation

WeChat Mini Programs only allow network requests to domains that are pre‑registered in the WeChat Public Platform and must use HTTPS.

Register a domain (e.g., techeek.cn ) via Tencent Cloud DNS.

Configure DNS A record pointing to your server IP (e.g., 118.119.120.121 ).

Obtain a free SSL certificate from Tencent Cloud (Domain‑validated).

During certificate application choose the "Domain‑type Free (DV)" option and use automatic DNS verification.

Server Configuration

1. SSH into the server (ensure ports 22 and 80 are open). Example using MobaXterm:

Session → SSH → Remote host:
→ Username: root

2. Configure Nginx :

cd /etc/nginx/ssl
ls

Upload the certificate files to /etc/nginx/ssl , then edit the virtual‑host configuration:

cd /etc/nginx/conf.d
ls
mv www.qcloud.la.conf weixin.techeek.cn.conf
nano weixin.techeek.cn.conf

Replace all occurrences of www.qcloud.la with your domain ( weixin.techeek.cn ) and set the SSL certificate paths:

server {
    listen 80;
    listen 443 ssl;
    server_name weixin.techeek.cn;
    ssl_certificate ssl/1_weixin.techeek.cn_bundle.crt;
    ssl_certificate_key ssl/2_weixin.techeek.cn.key;
    ...
}

Start Nginx:

nginx

Configure COS

Create a COS bucket with "public read, private write" permission, enable the default acceleration domain, and note the bucket name and acceleration URL.

Obtain the COS API credentials (APPID, SecretID, SecretKey) from the "Cloud API Key" section of the COS console.

Backend Service Setup

Navigate to the demo’s server directory (pre‑installed in the Tencent Cloud CVM image):

cd /data/release/qcloud-applet-album

Edit config.js to fill in your COS credentials and bucket name:

module.exports = {
    port: '9993',
    ROUTE_BASE_PATH: '/applet',
    cosAppId: 'YOUR_APPID',
    cosSecretId: 'YOUR_SECRETID',
    cosSecretKey: 'YOUR_SECRETKEY',
    cosFileBucket: 'YOUR_BUCKET_NAME',
};

Start the Node service with PM2:

pm2 start process.json

Configure Mini Program Communication Domain

In the WeChat Public Platform, set the server domain to the HTTPS domain you registered (e.g., https://weixin.techeek.cn ) and set the downloadFile legal domain to the COS acceleration domain.

Running the Demo

Open the Mini Program project in the Developer Tools, ensure config.js contains the correct communication domain, then click Debug . Because upload/download APIs do not work in the simulator, scan the QR code for real‑device preview.

Key Functionalities

Image Upload

The Mini Program uses wx.chooseImage to select a file, then sends a multipart/form-data POST request via wx.request to the backend. The Node server parses the request with the multiparty module and uploads the temporary file to COS using the COS SDK.

Image Listing

The backend calls COS's "list objects" API to retrieve the image list for the configured bucket and path.

Image Download & Save

Clients download images with wx.downloadFile and store them locally using wx.saveFile . The download domain must match the configured legal domain.

Image Deletion

Deletion is performed by invoking COS's file‑delete API from the backend.

Conclusion

This guide demonstrates a complete end‑to‑end deployment of a WeChat Mini Program that interacts with Tencent Cloud services. All components—frontend Mini Program, Node.js backend, Nginx reverse proxy, SSL, and COS—are configured and integrated, providing a practical reference for developers building similar Mini Program solutions.