Zenn
🐕

Linux版workspacesに開発環境を作る

2022/02/13に公開
Docker
Linux
VS Code
#
workspaces
tech

概要

AWSのLinux版のworkpsacesに開発環境を作ってみます。
前提として、DockerとVSCodeを用いて快適に開発できる環境を目指します。

対応内容

  • 日本語入力できるように設定
  • Dockerのインストール
  • Chromeのインストール
  • VSCodeのインストール
  • Remote Containerの設定
  • 参考：Nodeのインストール
  • 参考：プロキシ利用の設定

Workspaces環境（インスタンス）の作成

  1. AWSコンソールからworkspacesを選択し、WorkSpacesの起動を行います。
  2. バンドルの選択で、任意のサイズのAmazon Linux 2を選択します。この際言語は、Japanese(日本語)を選択します。
  3. そのままディスクサイズなどを選択してマシンを作成します。
  4. 20分程度待つとマシンが完成するので、WorkSpacesクライアントから接続します。（AWSの手順に従います）

補足情報：AD連携でログインした場合のログインユーザ

Workspacesで使用するディレクトリでAD連携している場合、ユーザ名は次のようになっています。
[ドメイン名の一部]\[ユーザ名]

例えば、testuser@testdomain.comの場合、testdomain\testuserのようなユーザ名となるようです。

補足情報：Linux版WorkspacesのOSの構成

Workspaces起動時に、ルートボリュームとユーザボリュームを選択していると思いますが、
ルートボリュームのボリューム容量が/にマウントされ、ユーザボリュームのボリューム容量が、volumes/userにマウントされています。

volumes/user/home/[ユーザ名]ボリュームが、/home/[ユーザ名]にマウントされているようです。

日本語入力する方法

画面右下にJAというアイコンがあり、ここを押下して「日本語 Kana - Kanji」を選択すると、日本語入力ができるようになります。

Dockerのインストール

コマンド操作は画面下にアイコンが表示されているMATE端末で行います。
まず、Dockerのインストールを行います。

shell
sudo yum install -y docker

ログインユーザーにDockerの使用を許可

ログインユーザーでDockerの操作を行えるように設定します。

shell
sudo gpasswd -a $USER docker

システム起動時にDockerを起動するように設定

端末再起動時にDockerが立ち上がるように設定します。

shell
sudo systemctl enable docker

DNSをGoogle Public DNSに設定

デフォルト設定だと、WorkspacesのDNS設定がVPCのネットワークアドレスを指しているため、コンテナ内から到達できず、名前解決がタイムアウトするため、Dockerの規定のDNSを変更します。

shell
sudo vi /etc/docker/daemon.json

設定内容

{
  "dns": ["8.8.8.8", "8.8.4.4"],
  "dns-search": ["."]
}

Dockerの起動

Dockerを起動します。

shell
sudo systemctl start docker

WorkspacesのOSに入りなおす

WorkspacesのOSからいったんログアウト(システム-[ユーザ名]のログアウト)して、再度接続しなおします。

コンテナを立ち上げコマンドを実行してみる

次のコマンドを実行します。

shell
docker run --rm amazonlinux:2 curl -s https://github.com/status

GitHub lives!
が返ってくれば成功です。

docker-composeのインストール

docker-composeの最新版のバージョンを調べる
docker-composeの最新バージョンを調べます。
https://github.com/docker/compose/releases

インストール
上記で調べた最新バージョンを指定して、以下コマンドを実行します。（2.2.3の部分にバージョン番号を設定します。※Docker V2から、V1までのインストール方法とは違うので注意します。

shell
sudo mkdir /usr/local/lib/docker
sudo mkdir /usr/local/lib/docker/cli-plugins
sudo curl -SL https://github.com/docker/compose/releases/download/v2.2.3/docker-compose-linux-x86_64 -o /usr/local/lib/docker/cli-plugins/docker-compose

docker-composeに実行権限を付与します。

shell
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

動作確認
次のコマンドを実行します。

shell
docker compose version

次のように返ってくれば成功です

Docker Compose version v2.2.3

Compose-Switchの導入(V1コマンドと互換性を持たせる場合)

以下はDockerV1とV2の互換性のための対応です。docker-composeコマンドはdocker composeという-無しのコマンドに変わっています。
元の、docker-composeでも動くようにする場合、以下の手順を行います。

shell
sudo curl -fL https://github.com/docker/compose-switch/releases/download/v1.0.4/docker-compose-linux-amd64 -o /usr/local/bin/compose-switch
sudo chmod +x /usr/local/bin/compose-switch
sudo update-alternatives --install /usr/local/bin/docker-compose docker-compose /usr/local/bin/compose-switch 99

反映確認

shell
update-alternatives --display docker-compose

次のように表示されれば反映されています。

docker-compose -ステータスは自動です。
リンクは現在 /usr/local/bin/compose-switch を指しています。
/usr/local/bin/compose-switch - 優先度 99
現在の「最適」バージョンは /usr/local/bin/compose-switch です。

Chromeをインストールする

端末にはデフォルトでFireFoxがインストールされています。
JS系開発などでは、Chromeのほうがやりやすいと思いますので、Chromeをインストールしておきます。

まず、Chromeを取得しに行くリポジトリの設定を行います。

shell
sudo vi /etc/yum.repos.d/google.chrome.repo

設定内容

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

以下のコマンドを実行することでChromeがインストールされます。

shell
sudo yum update
sudo yum install google-chrome-stable

VSCodeをインストールする

shell
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo yum -y install code

以下のコマンドでVSCodeが起動するようになります。

shell
code

VSCodeにエクステンションをインストールする

VSコードの拡張（エクステンション）を検索して、次のものをインストールします。

  • Docker
  • Remote Development(3つの拡張パックが内包されています。Remote Containerだけでもよいです)

そのほか開発上の必要に応じて、エクステンションを導入します。

  • Prettier
  • ESLint
  • Markdown All In One
    など

コンテナを立ち上げてみる

試しに、プロジェクトを１つ作ってコンテナを立ち上げてみます。
Reactのプロジェクトを下記に作成してみます。

/home/[ユーザ名]/react-sample
shell
cd ~
mkdir react-sample
cd react-sample
mkdir node
shell
vi docker-compose.yml
docker-compose.yml
version: '3'

services:
  node:
    build: ./
    volumes:
      - ./node:/usr/src/app
    command: sh -c "cd sample && yarn start"
    ports:
      - "3000:3000"
shell
vi Dockerfile
Dockerfile
FROM node:17-alpine
WORKDIR /usr/src/app
shell
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app sample"
docker-compose up -d

ブラウザで以下のURLにアクセスします。

http://localhost:3000/

以下のような画面が表示されたらOKです。

VSCodeからRemote Containerで接続してコード編集できるようにする

このままだと、VSCodeを使ってうまくプロジェクト編集できないので（Dockerがファイルをroot権限で作成するのに対して、VSCodeは一般ユーザ権限で動くので）、VSCodeが別のコンテナ経由でroot権限で操作できるように、接続を構成します。

  1. sudo chown username:username node/sampleのような形で、sampleフォルダの権限を一般ユーザ権限に変更する。（usernameの箇所は自身のユーザ名を設定。
  2. VSCodeの左下の緑アイコンから、Open Folder in Container...を選択します。
  3. 先ほど作成した、react-sample-node-sampleフォルダを選択します。
  4. alpine-3.14を選択します。
  5. コンテナが起動します。（起動しない・反応しない場合は、対象のフォルダに対するファイルの作成権限がない可能性がありますので、chownによる権限設定を見直してください）
  6. VSCode上で.devcontainer/devcontainer.jsonを開き、remoteUserをrootに変更します。
  7. 再度左下の緑アイコンを押下し、Rebuild Containerを選択して実行します。
  8. 何らかのファイル（App.jsなど）を操作し、保存が成功したらOKです。（root権限でファイルを操作できています）

補足：chownコマンドなどでユーザ名を指定するとき、AD連携しているユーザ名[ドメイン名の一部]\[ユーザ名]となっている場合、(バックスラッシュ)については2重にして、[ドメイン名の一部]\\[ユーザ名]とする必要があります。

ここまでのインストール作業で、DockerとVSCodeを用いた開発はほぼ可能な状態になったかと思います。

参考：Nodeのインストール

基本的には以降の必要なツールはコンテナ内でイメージから取得して動くと思いますので、必須ではないですが、何かと使うと思いますので、Nodeインストールの手順を記載しておきます。

shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
. ~/.nvm/nvm.sh
nvm install node

**以下でインストールできているかを確認します。

shell
node -e "console.log('Running Node.js ' + process.version)"

以下のように表示されればOKです。

Running Node.js VERSION

参考：プロキシ設定をする

Workspaces環境からプロキシを使って通信したい場合があると思います。
参考にその情報を掲載しておきます。

プロキシを設定する
workspacesからの接続をプロキシ経由にする場合は、以下の手順で設定します。
　※export HTTP_PROXY等の設定や/etc/environment設定はいくらしても反映されませんので気を付けてください。

  1. 画面下のシステム-設定-ネットワークプロキシを選択
  2. HTTPプロキシ、SSLプロキシに使用したいプロキシのIPアドレスとポートを設定

確認方法
下記サイトなどにアクセスして、意図した接続元IPになっているかを確認します。
https://www.cman.jp/network/support/go_access.cgi

Discussion