Configuration of the HTTP server

This article describes how to build and configure a "ryuu-play" application to run as a website.

1. Build the ptcg-server

The steps are identical to the steps described in the Readme file.

cd ptcg-server
npm install
npm build

2. Edit the environment config

Before building the ptcg-play package, update the ptcg-play/src/environments/environment.prod.ts file. You need to modify the following settings:

• apiUrl: this is the production URL of our server,
• allowServerChange: false (to prevent changing the server address)

3. Build the ptcg-play

Now we can go to the ptcg-play folder and build the interface in the production mode.

cd ptcg-play
npm install
npm run build -- --configuration=production

Static interface files should be generated in the ptcg-play/dist/ptcg-play folder.

4. Setting up the web server.

The target configuration assumes the use of a web server (such as nginx or lighttpd), which will act as a proxy and secure the connection by using the HTTPS protocol.

On the server machine should run the ptcg-server service in the background at 127.0.0.1:12021 (inaccessible from outside). The general idea is following: The HTTP requests, which path starts with /v1, /scans or /avatars it will be redirected to the service, otherwise the web server will return static files.

4.1. Example configuration for nginx:

server {
    listen 80;
    server_name domain-name.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name domain-name.com;

    ssl_certificate /path/to/ca-bundle.crt;
    ssl_certificate_key /path/to/certificate.key;

    location ~ ^/(v1|avatars|scans) {
        proxy_pass http://localhost:12021;
        proxy_http_version 1.1;
    }

    location /socket.io {
        proxy_pass http://localhost:12021;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location / {
        try_files $uri $uri/ /index.html =404;
        root /path/to/ryuu-play/ptcg-play/dist/ptcg-play;
    }
}

4.2. Example configuration for lighttpd:

$HTTP["host"] =~ "^domain-name\.com$" {
    server.document-root = "/path/to/ryuu-play/ptcg-play/dist/ptcg-play" 
    # Required for Angular, redirect everything to index.html
    server.error-handler-404 = "/index.html"

    $SERVER["socket"] == ":443" {
        ssl.engine = "enable"
        ssl.pemfile = "/path/to/certificate.pem"
        ssl.ca-file = "/path/to/ca-bundle.crt"
    }

    # Redirect HTTP traffic to HTTPS
    $HTTP["scheme"] == "http" {
        url.redirect = (
            "^/(.*)" => "https://domain-name.com/$1",
        )
    }

    # Redirect following HTTP requests to the ptcg-server
    $HTTP["url"] =~ "^/(v1|avatars|scans)/" {
        proxy.server = ( "" => (
           (
               "host" => "127.0.0.1",
               "port" => 12021
           )
        ))
        proxy.header = (
            # For https requests from client, map https:// to http://
            "https-remap" => "enable"
        )
    }

    # Redirect socket.io to the ptcg-server
    $HTTP["url"] =~ "^/socket.io/" {
        proxy.server = ( "" => (
           (
               "host" => "127.0.0.1",
               "port" => 12021
           )
        ))
        proxy.header = (
            # For https requests from client, map https:// to http://
            "https-remap" => "enable",

            # enable experimental support for Upgrade: websocket
            "upgrade" => "enable"
        )
    }
}

5. After restarting the web server and loading the new configuration, the server should provide both the interface and the API under one address.