Map Laravel App Port

User
version: '3.3'

services:
nginx:
image: nginx:latest
container_name: nt-nginx
ports:
– "1702:81"
– "1703:82"
networks:
– nt-app-network
volumes:
– ./nginx:/etc/nginx/conf.d
– ./applications/bedrock:/var/www/bedrock
– ./applications/laravel-app:/var/www/laravel-app
depends_on:
– php

php:
build:
context: ./php
container_name: nt-php
volumes:
– ./applications/bedrock:/var/www/bedrock
– ./applications/laravel-app:/var/www/laravel-app
expose:
– "9000"
working_dir: /var/www
networks:
– nt-app-network

ntmysql:
image: mysql:8.0
container_name: nt-mysql
environment:
MYSQL_ROOT_PASSWORD: rootpassword
MYSQL_DATABASE: site_db
MYSQL_USER: user
MYSQL_PASSWORD: userpassword
volumes:
– ./mysql/data:/var/lib/mysql
ports:
– "3312:3306"
networks:
– nt-app-network

adminer:
image: adminer
container_name: nt-adminer
restart: always
ports:
– '1701:8080'
networks:
– nt-app-network
depends_on:
– ntmysql

networks:
nt-app-network:
driver: bridge
map laravel app to 1703

Assistant
To map the Laravel application to port `1703` using the provided Docker Compose setup, you need to configure Nginx to serve the Laravel application on that port. Here’s how you can update the setup:

### 1. **Update Nginx Configuration**
Add a server block in your Nginx configuration to handle requests to port `82` (mapped to port `1703` on the host machine) and serve the Laravel application. For example, create or update the file `nginx/laravel.conf`:

server {
    listen 82;
    server_name localhost;

    root /var/www/laravel-app/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php$ {
        include fastcgi_params;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location ~ /.ht {
        deny all;
    }
}

Make sure the `nginx` service in your `docker-compose.yml` file is mounting the `nginx` configuration directory, as shown in your `volumes` section.

### 2. **Verify Laravel Setup in the PHP Container**
Ensure the Laravel application is set up correctly in the `php` container:
– The `public` folder should be accessible at `/var/www/laravel-app/public`.
– PHP's `working_dir` in your Docker Compose is already set to `/var/www`.

### 3. **Restart Docker Compose**
After making the changes, restart the containers to apply the updates:

docker-compose down
docker-compose up --build

### 4. **Access the Laravel Application**
Visit `http://localhost:1703` in your browser to access the Laravel application.

### Explanation
– **Port Mapping**: `1703:82` maps port `82` in the `nginx` container to port `1703` on the host machine.
– **Volume Mapping**: `./applications/laravel-app:/var/www/laravel-app` ensures the Laravel application files are accessible inside the container.
– **Nginx Configuration**: The server block listens on port `82` and serves the Laravel application from the `public` directory.

Let me know if you encounter any issues!

User
map angular app 1703
Assistant
To map the Angular application to port `1703`, you need to modify your Docker Compose setup and ensure the Angular app is served on the desired port. Here's how to do it:

### 1. **Add Angular Service to `docker-compose.yml`**
Update your `docker-compose.yml` file to include a service for the Angular application:

version: '3.3'

services:
  nginx:
    image: nginx:latest
    container_name: nt-nginx
    ports:
      - "1702:81"
    networks:
      - nt-app-network
    volumes:
      - ./nginx:/etc/nginx/conf.d
      - ./applications/bedrock:/var/www/bedrock
      - ./applications/laravel-app:/var/www/laravel-app
    depends_on:
      - php
      - angular

  php:
    build:
      context: ./php
    container_name: nt-php
    volumes:
      - ./applications/bedrock:/var/www/bedrock
      - ./applications/laravel-app:/var/www/laravel-app
    expose:
      - "9000"
    working_dir: /var/www
    networks:
      - nt-app-network

  angular:
    image: node:latest
    container_name: nt-angular
    working_dir: /app
    volumes:
      - ./applications/angular-app:/app
    command: sh -c "npm install && npm run start -- --host 0.0.0.0 --port 4200"
    ports:
      - "1703:4200"
    networks:
      - nt-app-network

  ntmysql:
    image: mysql:8.0
    container_name: nt-mysql
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: site_db
      MYSQL_USER: user
      MYSQL_PASSWORD: userpassword
    volumes:
      - ./mysql/data:/var/lib/mysql
    ports:
      - "3312:3306"
    networks:
      - nt-app-network

  adminer:
    image: adminer
    container_name: nt-adminer
    restart: always
    ports:
      - '1701:8080'
    networks:
      - nt-app-network
    depends_on:
      - ntmysql

networks:
  nt-app-network:
    driver: bridge

### 2. **Explanation of Changes**
– **Added `angular` Service**:
– Uses the `node:latest` image.
– Mounts the Angular application directory (`./applications/angular-app`) into the container at `/app`.
– Runs `npm install` and starts the Angular development server on port `4200`.
– Maps port `4200` in the container to port `1703` on the host machine.

### 3. **Angular Application Directory**
Ensure your Angular application is located in the `./applications/angular-app` directory, and the `package.json` file has a `start` script like:

"scripts": {
  "start": "ng serve"
}

### 4. **Restart Docker Compose**
Rebuild and restart the services to apply the changes:

docker-compose down
docker-compose up --build

### 5. **Access the Angular Application**
Visit `http://localhost:1703` in your browser to access the Angular application.

### Optional: Configure Nginx to Reverse Proxy Angular
If you prefer to route the Angular app through Nginx, update the Nginx configuration (`nginx/angular.conf`):

server {
    listen 82;
    server_name localhost;

    location / {
        proxy_pass http://angular:4200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Then update the `docker-compose.yml` to expose Nginx on port `1703` instead of directly mapping Angular.

Let me know if you need help with the Nginx proxy setup!

Leave a Comment

Your email address will not be published. Required fields are marked *