VSCode Devcontainers Port forwarding doesn't work properly on remote server

Overview

I am trying to run VSCode Devcontainer on my remote server for development with PHP and Nginx. It works perfect if I connect to the server via VSCode SSH and run docker-compose.yml manually on port 8081. The issue is that it doesn't work when I open project in VSCode Devcontainer (it has white screen with infinite loads and logs are clear).

Have you ever come across this?

Container Structure

Files

.devcontainer/devcontainer.json

{
    "name": "App",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "app",
    "workspaceFolder": "/workspace/",
    "features": {
        "ghcr.io/devcontainers-contrib/features/composer:1": {
            "version": "2.7.1"
        },
        "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {}
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "bmewburn.vscode-intelephense-client",
                "shevaua.phpcs",
                "persoderlind.vscode-phpcbf",
                "xdebug.php-debug",
                "christian-kohler.path-intellisense",
                "dbaeumer.vscode-eslint"
            ],
            "settings": {
                "terminal.integrated.shell.linux": "/bin/bash",
                "php.validate.executablePath": "/usr/local/bin/php"
            }
        }
    },
    "remoteUser": "vscode"
}

docker-compose.yml

version: '3'
services:
  app:
    container_name: app
    build:
      context: .
      dockerfile: .devcontainer/Dockerfile
    environment:
      PORT: 3000
    ports:
      - 3000:3000
    volumes:
      - .:/workspace
    user: vscode
    command: /bin/sh -c "while sleep 1000; do :; done"
  php:
    container_name: php
    build: .devcontainer/images/php
    volumes:
      - ./app/public:/var/www/html
      - ./conf/php:/usr/local/etc
      - ./logs/php:/usr/local/var/logs
    ports:
      - "9000:9000"
    depends_on:
      - app
  nginx:
    container_name: nginx
    build: .devcontainer/images/nginx
    volumes:
      - ./app/public:/var/www/html
      - ./conf/nginx:/etc/nginx
      - ./logs/nginx:/var/log/nginx
    ports:
      - "8081:80"
    depends_on:
      - php

.devcontainer/Dockerfile

FROM mcr.microsoft.com/devcontainers/base:ubuntu-22.04

.devcontainer/nginx/Dockerfile

ARG NGINX_VERSION=1.25
FROM nginx:${NGINX_VERSION}

.devcontainer/php/Dockerfile

ARG PHP_VERSION=8.3-fpm
FROM php:${PHP_VERSION}

What did I try

1. I tried to run docker-compose.yml via VSCode SSH Remote manually by typing docker-compose up -d and it works perfect. It forwards host localhost:8081 to localhost:8081 and I can see content of index.php file.

• Content: localhost:8081
• VSCode: PORTS tab
• Docker: compose -up d && docker ps

2. I tried to set up Docker host in VSCode by adding code below following Develop Remote Host documentation

"docker.environment": {
    "DOCKER_HOST": "ssh://your-remote-user@your-remote-machine-fqdn-or-ip-here"
}

3. I tried to change port for all services
4. I tried to set up launch.json file to run PHP in workspace manually

Guess

In general I understand why it happens. I think it forwards ports from Docker Remote Server to Remote Server instead of forwarding from Docker Remote Server to Local Environment, but how to tackle it I don't know.

Expectations

I want to run VSCode Devcontainer on remote server instead of VSCode SSH Remote. In result, I should be able to develop in VSCode Devcontainer on the my own remote server. In addition, PHP and Nginx should work without any issues.

It's not possible to forward remote port to local machine in VSCode

VSCode doesn't support port forwarding if you're connected to a remote machine.

Currently, port forwarding only works to expose locally-running services. It doesn't work in remote connections yet, although we expect it to in the future.

Depending on your scenario, you may want to use the VS Code Remote - Tunnels extension to tunnel into a remote machine. You can learn more in the Remote - Tunnels documentation.

• How do I forward local services if I'm connected to a remote machine?

Alternative solution

We can forward Remote Port to Local Environment using 3rd party tools like socat.

Here is instructions how to run Docker project on Remote host using VSCode SSH connection and VSCode containers.

1. Forward port 80 to port 8080 in VSCode using SSH connection;
   

2. Forward Remote Server port 80 to your Local port 8080 by running socat command in VSCode terminal (socat should be installed to use it):

   sudo socat TCP-LISTEN:80,fork TCP:127.0.0.1:8080
   

   WARNING:
   NEXT STEPS SHOULD BE DONE IN THE ANOTHER VSCODE WINDOW.
   TWO (2) VSCODE WINDOWS SHOULD BE OPENED.

   FIRST ONE FOR PORT REDIRECTION USING SSH CONNECTION.
   SECOND ONE FOR CODING USING VSCODE CONTAINER.

3. Run VSCode container and enjoy coding remotely;

Error: port 8080 is already used

1. Check which app is using port 8080 by typing lsof -i tcp:8080 in terminal;

2. Find PID in the output and kill the application sudo kill <PID> ;

References

• Port forwarding using socat