🐱

MacでDocker環境を構築したいメモ

2023/07/16に公開

Docker

こんにちは、ぐらじえです。

今回はMacBookを購入してDockerの環境を作成したいと思い、Docker環境で開発ができるまでの順序を備忘録として残しておこうと思います。

ちなみに筆者はWindowsユーザーなので、Macについてまだまだ何も知りません、、
間違ってる箇所などあればご指摘のほどよろしくお願いします。

"Visual Studio Code"のインストール

https://code.visualstudio.com/Download

無事インストール成功しました！

Visual Studio Code

とりあえず、よく使う拡張機能や、日本語設定などを済ませました。
Windowsとインストールの勝手が違うのも、Macの難しいポイントです、、

拡張機能のインストール

拡張機能の中でも、リモート接続を可能にしてくれる拡張機能が必要だそうなので、”Remote Development”というやつをインストールしました。

Remote Development

"Dev Containers”という拡張機能でもできるみたいですが、これは"Remote Development"の中に含まれているので、どちらをインストールしてもいいみたいです。

"Docker Desktop"のインストール

筆者が使用しているMacBookはM2チップなため[Apple チップのMac]ボタンからdmgファイルをダウンロードしました。
こちらも無事にインストールできて、アプリを起動すると規約画面が表示されました。

Docker Desktop Terms

筆者はDockerのアカウントは持っていたので、そのままログイン。

Docker Desktop

無事にDocker Desktopが立ち上がりました！

Apple silicon の Mac
Docker Desktop 4.3.0 からは、Rosetta 2 をインストールするためのハードウェア要件を削除しています。 Darwin/AMD64 を利用するにあたって、Rosetta 2 を必要とするコマンドラインツールが少しはあります。以下の既知の問題の節を確認してください。ただし十分な機能性を確保するためには、Rosetta 2 のインストールをお勧めします。 Rosetta 2 のインストールは、コマンドラインから手動で、以下のようにして行います。

softwareupdate --install-rosetta

詳しくは Docker Desktop for Apple silicon を参照してください。

Docker Desktopのサイトの「システム要件」のところにこんな記載があったので、これも「ターミナル」を使って指示通りに実施しました。

% softwareupdate --install-rosetta

I have read and agree to the terms of the software license agreement. A list of Apple SLAs may be found here: https://www.apple.com/legal/sla/
Type A and press return to agree: a
2023-07-16 21:08:51.378 softwareupdate[11257:732832] Package Authoring Error: 042-01896: Package reference com.apple.pkg.RosettaUpdateAuto is missing installKBytes attribute
Install of Rosetta 2 finished successfully

途中で同意の旨の確認があったので”a”を入力して"Enter"！

Install of Rosetta 2 finished successfully

最後に上記のように表示されたので、おそらく成功？

いざ、Docker環境を使ってみる

今回は"React"の環境でも作ってみようかと思います。

add dev container configuration files

"F1"で現れるコマンドパレットに以下を入力して、".devcontainer"を作成。

add dev container configuration files

設定で"Node.js"を選択。

devcontainer.json

ひとまず、"Dockerfile"は削除して、"devcontainer.json"の中身をReact仕様に変更しました。

devcontainer.json

{
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
  "customizations": {
    "vscode": {
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.organizeImports": true,
          "source.fixAll.eslint": true
        }
      },
      "extensions": [
        "dsznajder.es7-react-js-snippets",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "christian-kohler.path-intellisense",
        "mhutchie.git-graph",
        "VisualStudioExptTeam.vscodeintellicode",
        "formulahendry.auto-rename-tag",
        "formulahendry.auto-close-tag",
        "streetsidesoftware.code-spell-checker"
      ]
    }
  }
}