project-docker ┣ Projekt-API (Rails Repository) ┃ ┣ app ┃ ┣ ... ┃ ┗ Gemfile ┣ Projektfront (Next.js Repository) ┃ ┣ .next ┃ ┣ ... ┃ ┗ package.json ┣ docker-compose.yml ┣ Dockerfile.backend ┗ Dockerfile.frontend
Wenn Sie direkt unter "Projekt-Docker" auf "Docker-Compose Up" klicken, werden API und Front (und DB) gleichzeitig gestartet und Sie werden zufrieden sein.
docker-compose.yml
Unten ist docker-compose.yml. Derzeit gibt es mindestens drei "Dienste":
docker-compose.yml(Teilweise weggelassen)
services:
db:
image: postgres:11.5
ports:
- "5432:5432"
backend:
build:
context: .
dockerfile: Dockerfile.backend
volumes:
- ./project-api:/project-api
command: /bin/sh -c "rm -f /api-okapi/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
ports:
- "3000:3000"
depends_on:
- db
frontend:
build:
context: .
dockerfile: Dockerfile.frontend
command: npm run dev
volumes:
- ./project-front:/project-front
ports:
- "8080:8080"
--VScode und Docker sind bereits installiert
Nehmen wir als Beispiel die API-Seite. Machen Sie dasselbe für die Vorderseite.
project-docker werden ein .devcontainer-Verzeichnis und zwei Einstellungsdateien, devcontainer.json und docker-compose.yml, darunter erstellt. Bewegen Sie sich unter `.devcontainer / devcontainer.jsonDie .devcontainer / devcontainer.json unmittelbar nach der automatischen Erstellung lautet wie folgt.
devcontainer.json
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
"name": "Existing Docker Compose (Extend)",
// Update the 'dockerComposeFile' list if you have more compose files or use different names.
// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
"dockerComposeFile": [
"../docker-compose.yml",
"docker-compose.yml"
],
// The 'service' property is the name of the service for the container that VS Code should
// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
"service": "backend",
// The optional 'workspaceFolder' property is the path VS Code should open by default when
// connected. This is typically a file mount in .devcontainer/docker-compose.yml
"workspaceFolder": "/workspace",
// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.shell.linux": null
},
// Add the IDs of extensions you want installed when the container is created.
"extensions": []
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Uncomment the next line if you want start specific services in your Docker Compose config.
// "runServices": [],
// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
// "shutdownAction": "none",
// Uncomment the next line to run commands after the container is created - for example installing curl.
// "postCreateCommand": "apt-get update && apt-get install -y curl",
// Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
// "remoteUser": "vscode"
}
Schreiben Sie dies wie folgt um.
devcontainer.json(Nur der korrigierte Teil)
{
"name": "project-api-docker", //Mach es zu einem schönen Namen
"dockerComposeFile": [
"../../docker-compose.yml", //Der Pfad wurde korrigiert, da der Ordner verschoben wurde
"docker-compose.extend.yml" // .Add verlängern (ich brauche es nicht, wenn es nur funktioniert, aber ich habe den Namen aus Gründen der Klarheit geändert)
],
"runServices": [
"db",
"backend",
//Fügen Sie hinzu, wenn es andere Dienste wie stmp gibt."frontend"Es ist wichtig, nicht einzuschließen. Wenn leer, werden standardmäßig alle Dienste gestartet.
],
"workspaceFolder": "/workspace/project-api/", //Arbeitsbereichsprojekt-Mach es api
}
Die .devcontainer / docker-compose.yml unmittelbar nach der automatischen Erstellung lautet wie folgt.
docker-compose.yml
version: '3'
services:
# Update this to the name of the service you want to work with in your docker-compose.yml file
backend:
# If you want add a non-root user to your Dockerfile, you can use the "remoteUser"
# property in devcontainer.json to cause VS Code its sub-processes (terminals, tasks,
# debugging) to execute as the user. Uncomment the next line if you want the entire
# container to run as this user instead. Note that, on Linux, you may need to
# ensure the UID and GID of the container user you create matches your local user.
# See https://aka.ms/vscode-remote/containers/non-root for details.
#
# user: vscode
# Uncomment if you want to override the service's Dockerfile to one in the .devcontainer
# folder. Note that the path of the Dockerfile and context is relative to the *primary*
# docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
# array). The sample below assumes your primary file is in the root of your project.
#
# build:
# context: .
# dockerfile: .devcontainer/Dockerfile
volumes:
# Update this to wherever you want VS Code to mount the folder of your project
- .:/workspace:cached
# Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker-compose for details.
# - /var/run/docker.sock:/var/run/docker.sock
# Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
# cap_add:
# - SYS_PTRACE
# security_opt:
# - seccomp:unconfined
# Overrides default command so things don't shut down after the process ends.
command: /bin/sh -c "while sleep 1000; do :; done"
** Benennen Sie die Datei zunächst in .devcontainer / docker-compose.extend.yml ** um.
Dies macht es leicht zu erkennen, dass .devcontainer / docker-compose.extend.yml nur einige Elemente von docker-compose.yml direkt unter project-docker überschreibt. Weil.
Schreiben Sie dann den Inhalt von ".devcontainer / docker-compose.extend.yml" wie folgt um.
yml:docker-compose.extend.yml(Nur der korrigierte Teil)
services:
backend:
volumes:
- .:/workspace:cached
- ~/.gitconfig:/root/.gitconfig #Lokal.Home-Verzeichnis auf der Containerseite, um die gitconfig-Einstellungen im Container freizugeben(in diesem Fall/root)Montieren auf.
- ~/.ssh:/root/.ssh #Lokal.So teilen Sie die SSH-Einstellungen in einem Container(Folgendes wird weggelassen)
- /var/run/docker.sock:/var/run/docker.sock #Ich kommentiere nicht, aber ich verstehe die Notwendigkeit nicht wirklich. Bitte sag mir ...
command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0' ; while sleep 1000; do :; done"
devcontainer.json(Nur der korrigierte Teil)
{
"runServices": [
"frontend"
// "db",
// "backend",
],
}
--Beispiel: Lassen Sie ESLint das Format jedes Mal ausführen, wenn Sie eine .ts-Datei speichern
.vscode / settings.json.jsonc:.devcontainer/devcontainer.json
{
"settings": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true //Formatieren Sie beim Speichern einer Datei mit ESLint
}
...
},
}
--Beispiel: Fügen Sie das VScode-Plug-In für eslint ein
jsonc:.devcontainer/devcontainer.json
{
"extensions": [
"dbaeumer.vscode-eslint",
...
],
}
--Beispiel: Fügen Sie das Abschlussskript des Befehls git ein
docker-compose.yml
frontend:
volumes:
- ./bash-config/.bashrc:/root/.bashrc
- ./bash-config/.git-completion.bash:/root/.git-completion.bash
- ./bash-config/.git-prompt.sh:/root/.git-prompt.sh
...
Recommended Posts