Linux版workspacesに開発環境を作る

概要

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 連携している場合、ユーザ名は次のようになっています。
[ドメイン名の一部]\[ユーザ名]

例えば、[e-mail]の場合、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