Контейнер разработки VsCode не обновляется автоматически - PullRequest
Новая
       1

Контейнер разработки VsCode не обновляется автоматически

0 голосов
/ 09 мая 2020

У меня есть установка проекта Vue с контейнером для разработки в Vs Code, но у меня есть некоторые проблемы с ним. Для начала, когда я открываю проект в Vs Code, нажимаю F1 и выбираю параметр Remote-Containers: Open folder in container, я получаю ошибку Nginx 502 Bad Gateway, когда я go на localhost:3000. Если я запустил npm start в своем терминале, веб-страница будет работать на localhost:3000, но я не вижу обновлений в реальном времени, когда я кодирую. Для моего коллеги, который использует Ma c, все работает нормально, просто выбрав опцию Remote-containers, даже без использования npm start. Я использую Windows с WSL2. В чем может быть проблема? См. Соответствующие файлы ниже.

devcontainer. json: 

{
    "name": "Existing Docker Compose (Extend)",
    "dockerComposeFile": [
        "docker-compose.yaml"
    ],
    "service": "alvtime-vue-dev",
    "workspaceFolder": "/usr/src/app",
    "settings": {
        "terminal.integrated.shell.linux": null
    },
    "extensions": [
        "dbaeumer.vscode-eslint",
        "octref.vetur",
        "esbenp.prettier-vscode",
        "ms-azuretools.vscode-docker"
    ],
    "remoteUser": "vscode"
}

docker -compose.yml: 

version: '3.7'

services:
  vue-dev:
    container_name: vue-dev
    user: vscode
    tty: true
    image: vue-dev
    build:
      context: ../
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/usr/src/app:cached
      - /usr/src/app/node_modules/
    expose:
      - 8080
    environment:
      - VUE_APP_HOST=http://localhost:3000
      - VUE_APP_ACCESS_SCOPE=someScope
      - VUE_APP_CLIENT_ID=someClientId
  nginx-reverse-proxy:
    container_name: nginx-reverse-proxy
    build: ../nginx/
    command: nginx -g 'daemon off;'
    ports:
      - "3000:80"
    links:
      - dotnet-backend
      - vue-dev
  dotnet-backend:
    container_name: dotnet-backend
    image: someimage
    links:
      - mssql-db
    environment:
      - ConnectionStrings__db=someConnectionString
    expose:
      - "80"
  mssql-db:
    container_name: mssql-db
    image: some-image
    expose:
      - "1433"
    command:
      - /bin/bash
      - -c
      - |
        # Launch MSSQL and send to background
        /opt/mssql/bin/sqlservr &
        # So that the container doesn't shut down, sleep this thread
        sleep infinity

devcontainer dockerfile: 

FROM node:13.5

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

ARG USERNAME=vscode
ARG USER_UID=1001
ARG USER_GID=$USER_UID

RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \
    #
    # Verify git, process tools, lsb-release (common in install instructions for CLIs) installed
    && apt-get -y install git openssh-client less iproute2 procps lsb-release \

    # Create a non-root user to use if preferred - see https://aka.ms/vscode-remote/containers/non-root-user.
    && groupadd --gid $USER_GID $USERNAME \
    && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \
    # [Optional] Add sudo support
    && apt-get install -y sudo \
    && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install

COPY . .
CMD sh

nginx dev.conf: 

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        proxy_pass http://vue-dev:8080;
    }

    location /api/ {
        proxy_pass http://dotnet-backend/api/;
    }

    location /swagger/ {
        proxy_pass http://dotnet-backend/swagger/;
    }

    location ~ ^/sockjs-node/(.*?)/websocket {
        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://vue-dev:8080;
    }
}

nginx dockerfile: 

FROM nginx:stable-alpine

COPY dev.conf /etc/nginx/conf.d/default.conf

WORKDIR /usr/share/nginx/html
...