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

157 Views Asked by At

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.
  1. 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"
}
  1. I tried to change port for all services
  2. 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.

0

There are 0 best solutions below