From ee974817fe0d65674858d164cca6fc6de2bb6fbf Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Wed, 23 Nov 2022 11:35:49 +0100 Subject: [PATCH] Add support for next.js development in docker (#43138) Co-authored-by: Tim Neutkens --- .devcontainer/Dockerfile | 25 +++++++++++++++ .devcontainer/base.Dockerfile | 55 +++++++++++++++++++++++++++++++++ .devcontainer/devcontainer.json | 40 ++++++++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 .devcontainer/Dockerfile create mode 100644 .devcontainer/base.Dockerfile create mode 100644 .devcontainer/devcontainer.json diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000000000..7efa40b087aa9 --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,25 @@ +# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster +ARG VARIANT=16-bullseye +FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT} + +# [Optional] Uncomment this section to install additional OS packages. +# These are required to run playwright properly +RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ + && apt-get -y install --no-install-recommends \ + gconf-service libxext6 libxfixes3 libxi6 libxrandr2 \ + libxrender1 libcairo2 libcups2 libdbus-1-3 libexpat1 \ + libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 \ + libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 \ + libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \ + libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 \ + libatk1.0-0 libc6 libdrm-dev libgbm-dev ca-certificates fonts-liberation lsb-release xdg-utils wget + +# [Optional] Uncomment if you want to install an additional version of node using nvm +# ARG EXTRA_NODE_VERSION=10 +# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" + +# [Optional] Uncomment if you want to install more global node modules +# RUN su node -c "npm install -g " + +# Enable pnpm +RUN corepack enable pnpm \ No newline at end of file diff --git a/.devcontainer/base.Dockerfile b/.devcontainer/base.Dockerfile new file mode 100644 index 0000000000000..7b4c41b2ead31 --- /dev/null +++ b/.devcontainer/base.Dockerfile @@ -0,0 +1,55 @@ +# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster +ARG VARIANT=16-bullseye +FROM node:${VARIANT} + +# [Option] Install zsh +ARG INSTALL_ZSH="true" +# [Option] Upgrade OS packages to their latest versions +ARG UPGRADE_PACKAGES="true" + +# Install needed packages, yarn, nvm and setup non-root user. Use a separate RUN statement to add your own dependencies. +ARG USERNAME=node +ARG USER_UID=1000 +ARG USER_GID=$USER_UID +ARG NPM_GLOBAL=/usr/local/share/npm-global +ENV NVM_DIR=/usr/local/share/nvm +ENV NVM_SYMLINK_CURRENT=true \ + PATH=${NPM_GLOBAL}/bin:${NVM_DIR}/current/bin:${PATH} +COPY library-scripts/*.sh library-scripts/*.env /tmp/library-scripts/ +RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ + # Remove imagemagick due to https://security-tracker.debian.org/tracker/CVE-2019-10131 + && apt-get purge -y imagemagick imagemagick-6-common \ + # Install common packages, non-root user, update yarn and install nvm + && bash /tmp/library-scripts/common-debian.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" "true" "true" \ + # Install yarn, nvm + && rm -rf /opt/yarn-* /usr/local/bin/yarn /usr/local/bin/yarnpkg \ + && bash /tmp/library-scripts/node-debian.sh "${NVM_DIR}" "none" "${USERNAME}" \ + # Configure global npm install location, use group to adapt to UID/GID changes + && if ! cat /etc/group | grep -e "^npm:" > /dev/null 2>&1; then groupadd -r npm; fi \ + && usermod -a -G npm ${USERNAME} \ + && umask 0002 \ + && mkdir -p ${NPM_GLOBAL} \ + && touch /usr/local/etc/npmrc \ + && chown ${USERNAME}:npm ${NPM_GLOBAL} /usr/local/etc/npmrc \ + && chmod g+s ${NPM_GLOBAL} \ + && npm config -g set prefix ${NPM_GLOBAL} \ + && sudo -u ${USERNAME} npm config -g set prefix ${NPM_GLOBAL} \ + # Install eslint + && su ${USERNAME} -c "umask 0002 && npm install -g eslint" \ + && npm cache clean --force > /dev/null 2>&1 \ + # Install python-is-python3 on bullseye to prevent node-gyp regressions + && . /etc/os-release \ + && if [ "${VERSION_CODENAME}" = "bullseye" ]; then apt-get -y install --no-install-recommends python-is-python3; fi \ + # Clean up + && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /root/.gnupg /tmp/library-scripts + +# [Optional] Uncomment this section to install additional OS packages. +# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ +# && apt-get -y install --no-install-recommends + +# [Optional] Uncomment if you want to install an additional version of node using nvm +# ARG EXTRA_NODE_VERSION=10 +# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" + +# [Optional] Uncomment if you want to install more global node modules +# RUN su node -c "npm install -g "" \ No newline at end of file diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000000000..d8de98afd28c3 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,40 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: +// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.0/containers/javascript-node +{ + "name": "Next.js Dev Container", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 18, 16, 14. + // Append -bullseye or -buster to pin to an OS version. + // Use -bullseye variants on local arm64/Apple Silicon. + "args": { + "VARIANT": "16-bullseye" + } + }, + // Configure tool-specific properties. + "customizations": { + // Configure properties specific to VS Code. + "vscode": { + // Add the IDs of extensions you want installed when the container is created. + "extensions": ["dbaeumer.vscode-eslint"] + } + }, + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "yarn install", + // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node", + "features": { + // For some reason "git" or "rust" doesn't work + "ghcr.io/devcontainers/features/git:1": "os-provided", + "ghcr.io/devcontainers/features/rust:1": "latest" + // Github latest can't be installed due to GPG issues: https://github.com/cli/cli/discussions/6222 + // "github-cli": "latest", + }, + // This is needed for forwarding X11: https://github.com/microsoft/vscode-remote-release/issues/3841 + "runArgs": ["--net=host"], + "remoteEnv": { + "DISPLAY": ":0" + } +}