Question

我有一个Vue项目设置，带有一个Vs Code中的开发容器，但是我遇到了一些问题。首先，当我用Vs Code打开项目时，按F1并选择Remote-Containers: Open folder in container选项，当我转到localhost:3000时，我只会收到Nginx 502 Bad Gateway错误。如果我在终端机上运行npm start，则该网页将在localhost:3000上运行，但是在编码时看不到实时更新。对于使用Mac的同事而言，即使不使用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

VsCode开发容器不会自动更新

0 个答案: