Zenn
🙆

chromebookで開発環境を作る（VSCode + Docker + node + React）

2022/07/04に公開
Docker
Linux
Chromebook
tech

SNSの広告でも見ることが多くなったchromebook 💻
今回は、このchrombookで開発できる環境を構築したいと思います。

Linuxを有効にする

chromebookの用意されているLinuxを以下の手順で有効にします。
設定 > 詳細設定（サイドバー） > ファイル（サイドバー） > Linux 開発環境 > オンにする
ポップアップ画面の指示に従ってLinuxを有効にしてください。

設定が終わると、Linuxのコンソール画面が表示されます。
表示されない場合は、アプリの一覧 > Linuxアプリ > ターミナル から起動できます。

Linuxパッケージリストの更新

以下のコマンドをターミナル上で実行してください。
※ターミナル上でのペーストは「ctrl + shit + v」

sudo apt-get update
sudo apt-get install -y gnome-keyring

VSCode

インストール

VSCodeをインストールしていきます。
まずは、ダウンロードするべきのVSCodeのパッケージを調べます

dpkg --print-architecture

表示された内容によってVSCodeのダウンロードするものが変わります。

  • amd64 : 64bit
  • arm64 : ARM64

表示された内容を確認したらVSCodeのダウンロードページ(https://code.visualstudio.com/download)に移動し、「.deb」の部分に該当するリンクからダウンロードしてください。

ダウンロードしたファイルをダブルクリックをして、インストールを行ってください。

インストールが完了すると、アプリ一覧 > Linuxアプリ にVSCodeが追加され、使用できます。

このままでは日本語入力はできないので、必要であれば日本語入力の設定を行ってください。

Docker

インストール

ターミナル上で以下のコマンドを順々に実行してください。

sudo apt remove --purge docker docker-engine docker.io containerd runc

sudo apt update -y

sudo apt install -y \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg2 \
    software-properties-common

curl -fsSL https://download.docker.com/linux/debian/gpg | sudo apt-key add -

sudo apt-key fingerprint 0EBFCD88

sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/debian \
   $(lsb_release -cs) \
   stable"

sudo apt update -y

sudo apt install -y docker-ce docker-ce-cli containerd.io

docker-composeのインストール

ターミナル上で以下のコマンドを順々に実行してください。

sudo curl -L https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

以上で環境構築は完了です。
以降はDocker上にNode.jsをインストールして使用可能にしていきます。

プロジェクトフォルダの作成

chromebookのファイルアプリから Linuxファイル にプロジェクトを置くファイルを作成します。
その後、「Dockerfile」と「docker-compose.yml」を作成します。
以下のファイルは例です。

Dockerfile
FROM amazonlinux:2
RUN yum update -y \
 && yum upgrade -y \
 && curl -sL https://rpm.nodesource.com/setup_16.x | bash \
 && yum install -y nodejs \
 && echo 'alias ls="ls -F --color=auto"' >> ~/.bashrc
docker-compose
version: "3.7"
services:
  nodejs:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ./myapp:/myapp
    working_dir: /myapp
    tty: true
    entrypoint: bash

Dockerの起動

ターミナル上で以下のコマンドを順々に実行してください。

sudo docker-compose up -d

sudo docker-compose exec nodejs bash

これで、node.jsの環境は完成しています。

React.js

プロジェクトの作成

ターミナル上で以下のコマンドを実行してください。

npx create-react-app app --templete typescript

アプリケーションの起動

ターミナル上で以下のコマンドを実行してください。

cd app

npm run start

これで、ブラウザで確認（localhost:3000）して確認できれば、全て終了です。
お疲れ様でした。

Discussion