Help us understand the problem. What is going on with this article?

code-server ローカル環境篇(2) Dockerで独自のCode-Server 環境を作って見る

これは、2019年 code-server に Advent Calender の 第2日目の記事です。
一日目 の続きです。
今回も、code-server って何だろう?と言う事を解説していきます。

(1) code-server って何?
(2) Dockerで独自のcode-server 環境を作って見る
(3) VSCode の Plugin を 利用してみる
(4) DBなども含めたMVC環境を用意してみよう (1)
(5) DBなども含めたMVC環境を用意してみよう (2)
(6) DBなども含めたMVC環境を用意してみよう (3)
(7) DBなども含めたMVC環境を用意してみよう (4)
(8) DBなども含めたMVC環境を用意してみよう (5)
(9) DBなども含めたMVC環境を用意してみよう (6)
(10) おまけ

(NEXT->) オンライン環境篇 1日目 作業環境を整備する

(..) ローカルで、DBなどの環境も含めて構築するには
(..) オンライン上に置くには?
(..) K8Sなどの最近の流行りの環境と連携するには?
(..) Code-Serverを改造して、より良くしたい

あらすじ

前回は、Hello World!! を動かしてみました。ブラウザー上で動作するVSCodeを確認できたと思います。

実際に触ってみた方は、"/home/coder/project" と dockerを起動したディレトリーブ作成したコードが格納されたと思います

Docker で独自の環境を作ってみる。

今回は、皆さんがよく使う Linux環境上でCode-Serverを動かしてみましょう。私はUbuntuをよく使うので、Ubuntu上に構築してみたいと思います!!

まずは、ubuntuを動かしてみましょう

Dockerfile を作成します。

FROM ubuntu:20.04

ビルドして、Docker上でBashを起動してみましょう

# cs02 という名前でイメージを作成
$ docker build -t cs02 .

# cs02 上で bash を 起動してみる
$ docker run -it cs02 bash
root@9e2f79078fcd:/#

はい、ubuntu を Docker 上で動かせました!!

code-server を インストールしてみましょう

https://github.com/cdr/code-server に 記載されている、https://github.com/cdr/code-server/releases のページから最新のものを拾ってきます。

Screen Shot 2019-12-02 at 0.36.07.png

今回は、code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz を利用することにします。

FROM ubuntu:20.04
RUN apt-get update
# code-server を取得するのに wget を install しておく
RUN apt-get install -y wget

# 作業ディレクトリを /works にする。どこでも良いです
WORKDIR /works

# code-server のバイナリーを取得
RUN wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

# code-server を /works 配下に解凍する
RUN tar -xzf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz -C ./ --strip-components 1 

WORKDIR /works/app

# デフォルトは、/works/app で起動するようにする。
CMD [ "/works/code-server", "--allow-http", "--auth", "none", "--port", "8443", "/works/app"]


※ dockerの中の ubuntu 上の bash で動作確認しながら、Dockerfileを作成していますが省略しています。

docker build -t cs02 .

作成したイメージを起動してみましょう

# bash などは指定しない
# カレントディレクトリ(絶対パス) と /works/app を mount する
# PCの8443 Portへの接続を Dockerの8443 Port への接続とする
docker run -v "$PWD:/works/app" -p "8443:8443" -it cs02 

とした後で、ブラウザーで、http://127.0.0.1:8443/ にアクセスすると、

Screen Shot 2019-12-02 at 0.57.02.png

VSCode が 立ち上がりました!!

次回

作成したImageを配布してみましょう。 一度、作成したImageは、ほぼほぼ、同じ状態で動かす事ができます。

PS

ソース

https://github.com/kyorohiro/advent-2019-code-server

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした