LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@return_chiba(千葉に帰り亭)

【codescapes(VSCode版)】GitHub CLI使用！クラウド開発環境下にファイルをコピー配置（2022年10月）

Posted at

はじめに

　皆さま、codespacesを用いた開発を楽しんでいらっしゃいますか？「今までできていたコレ、codespacesではどうやるんだ？」といった疑問は生まれていませんか？？
　今回は、私が抱えていた疑問の一つ「 codespacesを用いた開発でも、ファイルを開発環境に設置し扱いたい（けど、どうすれば…） 」に関して、いろいろな方に教えていただいたり・調べたりして得られた解決方法の一つを備忘録として残します。

:warning: この記事は、社内にて2022年10月頃に公開したメモを少しだけ整えたものです。見たことがある方、変わりの無い内容ですみません…

このメモで主に使用されている絵文字の意味

  • 🦑：以下…実施するツールなどが変わるタイミングです
  • :beginner: ：初心者向け…不慣れな方は、是非ついでに確認してみましょう

（その他の絵文字はあまり気にせず…）

より詳しい背景

　システム内に「とあるディレクトリに配置されたファイルを表示する」という機能がある。ファイルは事前に配置されており、その機能を使用した際に対象ディレクトリから呼び出される。

▼ ローカル環境での開発時のディレクトリ構成（例）
リポジトリ名「project_sample」とする。

C
├─ work
│  └─ project_sample <- git cloneして得たリポジトリ（ソース）
└─ usr1
    └─  JOB
    　　　└─  folder_sample <- このフォルダに画像を配置すると、ソース実行時にシステム上で表示される

上記をパスで書くと…↓

  • C:\work\project_sample：git cloneして得たリポジトリ（ソース）
  • C:\usr1\JOB\folder_sample：このフォルダに画像を配置すると、ソース実行時にシステム上で表示される

▼ 環境（超簡潔に）

  • OS：Windows10
  • コードエディタ：VSCode（Github CodespacesとVSCodeを紐づけて開発）
  • CLIツール：GitHub CLI（ コマンドライン上でGitHubの操作を行うことができる）

STEP0：前準備

0-1. クラウド開発環境上に、ディレクトリを作成しておく

🦑 以下は、VSCode上でクラウド開発環境を開き、ターミナル実施します。

　コマンドを使用してディレクトリを作成しておきます（自動生成されるなら実行しなくてOK）。
　作成されたディレクトリどんな権限が割り振られているかの確認と、必要があれば権限付与を忘れずに。
※下記の例では強い権限を付与していますが（777）、このような大きな権限を理由なく付与するのは推奨されていませんので適切にレベルを変更してください。

sudo mkdir -p /usr1/JOB/folder_sample
sudo chmod -R 777 /usr1/JOB/folder_sample

　どこに・どんなディレクトリが作成されているかを意識するのが良いかと。ちなみに、今回は下記の通り…

 workspaces
  └─ project_sample <- git cloneして得たリポジトリ（ソース）
 usr1
   └─  JOB
    　　└─  folder_sample <- このフォルダに画像を配置すると、ソース実行時にシステム上で表示される

:beginner: コマンドに不慣れな方は、是非「sudo」、「mkdir」「-p」、「chmod」「-R」「777」の意味を検索してみてください！

0-2. GitHub CLIをインストールする

🦑 公式ページからmsiファイルをダウンロード→ダウンロードファイルからインストールすることもできますが、
　今回私はGitHub上に記載のあるコマンド（Installation > Windows > WinGet > Install:）を、コマンドプロンプトから実施することでインストールしました。
　インストールが問題なく完了すると、 Git CMD などのアプリが使用できるようになるはずです。

winget install --id GitHub.cli

STEP1：アプリ「Git CMD」を開き、ログインする

🦑 以下は、アプリ「Git CMD」から実施しました。ターミナルから…

　（VPN接続下、プロキシ配下で実施するのであれば）プロキシ設定を行います。以下2つのコマンドを、ユーザー名・パスワード箇所を変えた上で実行してください。
※VPN接続外でしたら不要です。

set HTTP_PROXY=http://ユーザー名:パスワード@proxy.example.com:XXXX
set HTTPS_PROXY=http://ユーザー名:パスワード@proxy.example.com:XXXX

　（上記実行後からはログインが可能になるので、）下記コマンドを使用しログインします。

gh auth login

　直後、計5つほど質問されるはずです。ので、ご自身の環境に合わせて答えてください。
　ちなみに私は今回の場合は…ブラウザ認証を実施したいので下記のように返答してみました。もし、トークン認証を使用したい場合は、最後の質問「How would you like to authenticate GitHub CLI?」でブラウザではなくトークンを選べばOKなはず。

? What account do you want to log into? 
 -> GitHub.com
? You're already logged into github.com. Do you want to re-authenticate? 
 -> Yes
? What is your preferred protocol for Git operations? 
 -> HTTPS
? Authenticate Git with your GitHub credentials? 
 -> Yes
? How would you like to authenticate GitHub CLI? 
 -> Login with a web browser

　すると、ブラウザ認証の場合は、下記のようにワンタイムコードが表示されます。指示通りにターミナル上でエンターキーを押すと、勝手にブラウザが開くので、
🦑ブラウザ上で、このワンタイムコード（例ではEXAM-0123）を入力してください。

! First copy your one-time code:
 -> EXAM-0123
Press Enter to open github.com in your browser...
 -> <Enter>

🦑その後、SMSでauthentication codeが送られてくるので、そのコードをブラウザ上で入力したりなどして
🦑以下がGit CMD上に表示されれば、この場ではOKです。

✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as <ユーザー名🍑>

:warning::warning: この後codespace系コマンドを実施すると、再度ログインが求められることがあります。以下はその場合の手順です。
　ひょっとしたら、方法によっては省略可能かもしれません…ブラウザ認証ではなくトークン認証だとうまくいったりするのだろうか…:thinking:

　ここで、Git CMD上で gh codespace list コマンド（VSCodeと紐づけたcodespacesの一覧を表示するコマンド）を実施してみましょう。すると、下記のようなエラーが表示されます。
:beginner: ここで実施するコマンドは gh codespace list コマンドでなくても構いません！ここでのオススメはlistコマンドですが、公式マニュアルにcodespaces用に使用できるコマンド一覧もありますので、ぜひ気になるコマンドを実施してみてください。

error getting codespaces: HTTP 403: Must have admin rights to Repository. (https://api.github.com/user/codespaces?per_page=30)
This API operation needs the "codespace" scope. To request it, run:  gh auth refresh -h github.com -s codespace

　指示に従って gh auth refresh -h github.com -s codespace コマンドを実施しましょう。この後は前述とあまり変わらず、「Yes」と答えてワンタイムコードを入力するだけなので省略します。

gh auth refresh -h github.com -s codespace
? Authenticate Git with your GitHub credentials? Yes

! First copy your one-time code: EXAM-9876
Press Enter to open github.com in your browser...
✓ Authentication complete.

STEP2：「gh codespaces cp」コマンドを使用しファイルをコピー配置

　必要であれば、配置したいファイルのある場所にcdコマンドで移動し（ローカルのデスクトップにファイルがあるならcd Desktopなど）、
　gh codespace cpコマンドで、該当するクラウド開発環境内ディレクトリにコピー配置しましょう。今回は「1.jpg」という画像をコピー配置しました。

gh codespace cp 1.jpg remote:/usr1/JOB/folder_sample

　お使いのVSCodeで複数のクラウド開発環境（codespaces）を使用している場合は、どのcodespacesのworkspaceに配置するかを選択できます。

? Choose codespace:  [Use arrows to move, type to filter]
> <リポジトリ名1> (<ブランチ名1>): <codespaces名1>
  <リポジトリ名2> (<ブランチ名2>): <codespaces名2>

　これで配置完了です:v: システム上で確認してみましょう！

おわりに

　当初は正直なところ分からない・不慣れなことが多く、いろいろな方に質問してたどり着いた一つの方法になります。ご協力くださった皆さま、ありがとうございました！
　codespaces、（2022年10月頃は）日本語＆初心者にもやさしいメモがまだ少ない印象です。もし何か実施されました方がいらっしゃいましたら、簡単な内容でも全く構いませんので是非メモを共有していただけますととても嬉しいです。皆でcodespaces、楽しみましょ◎

　最後に…「はじめに」でも申しました通り、この備忘録は不完全な箇所もあるかと思います…個人的にまだ解決できていないことを下記「残っている疑問点」に残しますmm

残っている疑問点

  • （STEP1）ログイン時の認証方法に関して…もちろんケースによると思うが、ブラウザ認証 or トークン認証、どちらの方が良いのだろう？
  • （STEP2）ファイルの配置に関して…（今回はコマンドを使用したが）GUIで感覚的に配置できる拡張機能などは無いのだろうか？（有志のはあるようですが、公式の拡張機能でできたらいいな～と…）
  • そもそも、（VSCode版ではなく）ブラウザ版の場合はどういう方法でファイル配置を行うのだろう？
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?