Zenn
🌊

DevcontainerでReactとTypescriptの環境構築を行った話

2023/04/24に公開
初心者
メモ
tech

今回行ったこと

Devcontainerの立ち上げ

devcontainer.jsonの設定

(設定をGitHubに公開する)

【追記】

半分は自分用のメモ書きとして軽く記載していく。

Devcontainerの立ち上げ

はじめに、WSLからVScodeを立ち上げ、「表示」から「コマンドパレット」を選ぶ。

その後、「Dev containers:Add Dev Containers Configuration Files...」を選択

「Dev」など打てば検索一覧にでてくるはず

「Type」と打てば出てくる「Node.js & TypeScript」を選択。

その後は(defalut)となっているバージョンを選択し(おそらく18?)、そのまま「OK」を選択。これでTypeScript用のDevcontainerの立ち上げができた。

devcontainer.jsonファイルの設定

devcontainer.jsonファイルを以下のように書き直した。

devcontainer
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	//dockerファイルがない場合に参照する
	"image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// 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",
	"postCreateCommand": "npm install -g ts-node && npx create-react-app my-app-react",

	// Configure tool-specific properties.
	"customizations": {
		"vscode": {
			"extensions": [
				"dbaeumer.vscode-eslint",
				"MS-CEINTL.vscode-language-pack-ja",
				"esbenp.prettier-vscode",
				"formulahendry.code-runner"
			]
		}
	},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	"remoteUser": "root"
}

  • 主な変更点

    1. postCreateCommandの追加
    2. customizations { vscode { extensions: [~~] } } の追加
    3. remoteUserの追加

  • それぞれの変更理由

    1. コンテナを立ち上げた一番最初に実行するコマンド。今回はts-nodeのグローバルインストールと、「my-app-react」というReact用のディレクトリを作成するコマンドを実行しています。
    2. 拡張機能のインストールをおこなっている 。それぞれの詳細はここでは省く。
    3. コンテナ全体の実行できるユーザーの固定化を行う？正直理解しきれていない。

この辺の設定を行うことによってTypeScriptとReactの環境構築は終わったと思われる。

設定をGitHubに公開する

自分がGitHubになれきれていないこともあり、最も今回苦しんだ部分であったので、おまけで書いていく。
はじめにGitHubの方で空のリポジトリを作成しておく。その後はUbuntu上で以下のようにコマンドを入力していった。

git init
Initialized empty Git repository in ~~~/ts-node.git/

git add .
git commit -m "first setting"
~~create 色々なファイル名~~

git remote add origin git@github.com:~~~/ts-node.git
git push -u origin master

この最後の行で以下のエラーが発生した。

error: src refspec master does not match any
error: failed to push some refs to 'github.com:~~~/ts-node.git'

ネットで調べたところ、commitのし忘れなどで起こるとの記載があったので、「git status」で確認

On branch ~~~
nothing to commit, working tree clean

異常無し...
更に調べると「master」というブランチ名は昔のもので、現在では「main」になっている等の情報を得たので、変更して実行するも結果は変わらず...
ブランチの状況を確認するため「git branch」を実行すると

* ts-node

となっていたので、意味があるか分からなかったのでとりあえず「ts-node」を「main」に書き換えるため、「git branch -m ts-node main」を実行する。
その後に「git push origin main」を実行すると以下のエラーが

 ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'github.com:~~~/ts-node.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

空のリポジトリを作成する際に「README.md」ファイルを作成したためか、ローカル環境と差異があると言われた。そのため、以下のコマンドを実行した。

git fetch
 git merge --allow-unrelated-histories origin/main

これにより、リモート側のリポジトリをローカル環境に反映させながら枝と紐づけさせることができた。(途中コメント用のVim?も起動したが特に何も入力せずexitで抜けた)

ここまで行ってから改めて以下のコマンドを実行すると、GitHubに反映させることができた。

git push -u origin main

あとがき

手探り状態で取り組みはじめたため、全て理解しきる前に挑戦！精神で進んでいたために文字起こししようとすると理解しきれていない部分が大半だった。これでもできているか怪しいがとりあえず一段落と思いたい。また、数十件ものWebページを行ったり来たりしていたため、どれが参考になって、どれが参考にならなかったかを完全に忘却していしまったのも失敗だ。次からはそこもメモしていきたい。

【追記】

最初にGitHub上でリポジトリを作成してからそれをcloneして持ってきた環境で上記の設定を行ったほうが楽であった。(最初からREADME.mdファイルがあるため、ローカル環境になくて、リモート環境にないファイルがないことが発生しない)

Discussion