LoginSignup
31
34

More than 5 years have passed since last update.

docker+alpine+cloud9で最速・最軽量IDE環境を用意する

Last updated at Posted at 2018-12-17

当記事は、Docker Advent Calendar 2018の18日目です。

はじめに

当記事では、dockerを用いて、サーバーサイドで動く素敵なIDE、cloud9を簡単に構築し、
なおかつalpine Linuxを使うことでできるだけ軽量化しています。

Cloud9を知らない方のために

一言で言うと、サーバーサイド管理のIDEです。
サーバー側に情報を持つので

  • Webでアクセスするだけで、統合開発環境が使える
  • PCが変わっても同一の環境を維持できる
  • 複数の人間で作業ができる
  • 複数の環境を用意すれば、ブラウザでタブごとにリソース編集を切り替える

などのことが可能になります。

スクリーンショット 2018-12-11 11.54.48.png

現在では、AWSの環境で使われているのが一般的になりました。
しかし、ソースコードがgithubで公開されているので、AWS環境以外の環境でも使うことが出来ます。

結論

これを実行して下さい

command
docker run --rm -d -v /path/to/workspace:/workspace -p 8080:8080  sshinya/alpine-cloud9

認証情報変える場合はこっち

command
docker run --rm -d -v /path/to/workspace:/workspace -p 8080:8080 -e USERNAME=user -e PASSWORD=pass sshinya/alpine-cloud9

docker-composeだとこんな感じ

docker-compose.yml
# This is sample file
services:
    cloud9:
        image: sshinya/alpine-cloud9
        volumes:
            - /path/to/workspace:/workspace
        environment:
            USERNAME: user
            PASSWORD: pass
        ports:
            - "8080:8080"

以下、解説・構築手順

対象OS

今回、対象となるAlpine Linuxは3.7を使用しています。
最新版は3.8なのですが、どうしても構築に失敗してしまいトラブルシューティング中です。
(原因わかる方おられましたらコメントいただけると幸いです)

必要なモジュール

cloud9を動かすためのモジュールは以下のものを入れていきます。
Alpineなので、 apk add を使って入れていきます。
(CentOSでいうyum、Ubuntuでいうapt-get

  • bash
  • git
  • nodejs
  • make
  • gcc
  • g++
  • python
  • curl
  • wget
  • build-base
  • openssl-dev
  • apache2-utils
  • libxml2-dev
  • sshfs
  • tmux
  • supervisor

その他必要な作業

# cloneしてくる
git clone https://github.com/c9/core.git /c9

# 公式環境構築用スクリプト実行
curl -s -L https://raw.githubusercontent.com/c9/install/master/link.sh | bash

# マウントポイント作成
mkdir -p /workspace

# インストール実行
cd /c9
./scripts/install-sdk.sh

Dockerとしての設定

workspace領域(マウントポイント)の登録

VOLUME ["/workspace"]
WORKDIR /workspace

アクセスするポートの設定(今回はとりあえず8080)

EXPOSE 8080

cloud9実行時のBasic認証ID/PASSの設定(デフォルト値)

ENV USERNAME user
ENV PASSWORD pass

最終的なDockerfile

FROM alpine:3.7
LABEL maintainer "shinya"

RUN apk add --update --no-cache bash git nodejs make gcc g++ python curl wget build-base openssl-dev apache2-utils libxml2-dev sshfs tmux supervisor \
    && rm -f /var/cache/apk/* \
    && git clone https://github.com/c9/core.git /c9 \
    && curl -s -L https://raw.githubusercontent.com/c9/install/master/link.sh | bash \
    && mkdir -p /workspace \
    && cd /c9 \
    && ./scripts/install-sdk.sh

VOLUME ["/workspace"]
WORKDIR /workspace

EXPOSE 8080

ENV USERNAME user
ENV PASSWORD pass

ENTRYPOINT ["sh", "-c", "/usr/bin/node /c9/server.js -l 0.0.0.0 -p 8080 -w /workspace -a $USERNAME:$PASSWORD"]

ここにDockerfile置いています。
shinya/alpine-cloud9

あとは実行すれば、IDE環境がいっちょ上がり!

実際の画面

起動に成功すれば、アクセスすると最初に認証の画面が出てきます。

認証画面

認証が通ると起動画面になり・・・・

起動中

しばらくすると、「Welcome」の画面に切り替わります

Welcome画面

あとは、エンジニア魂をぶつけながら、コーディングするべし!

編集画面

おまけ

個人的に、Go言語の勉強をする環境がほしかったので、Go対応版も作りました。
Cloud9の中でRunボタンを押すことでコンパイルできるようになっています。

command
docker run --rm -d -v /path/to/workspace:/workspace -p 8080:8080  sshinya/alpine-cloud9:golang

Go言語版Dockerfile詳細

AlpineがGo言語版になっているのと、環境変数を設定しているのが違う点です。

FROM golang:alpine3.7
LABEL maintainer "shinya"

RUN apk add --update --no-cache bash git nodejs make gcc g++ python curl wget build-base openssl-dev apache2-utils libxml2-dev sshfs tmux supervisor \
    && rm -f /var/cache/apk/* \
    && git clone https://github.com/c9/core.git /c9 \
    && curl -s -L https://raw.githubusercontent.com/c9/install/master/link.sh | bash \
    && mkdir -p /workspace \
    && cd /c9 \
    && ./scripts/install-sdk.sh

VOLUME ["/workspace"]
WORKDIR /workspace


# Expose ports.
EXPOSE 8080

ENV USERNAME user
ENV PASSWORD pass

ADD env /root/.bashrc 
ADD env /root/.profile

ENTRYPOINT ["sh", "-c", "/usr/bin/node /c9/server.js -l 0.0.0.0 -p 8080 -w /workspace -a $USERNAME:$PASSWORD"]
envの中身
PATH=$GOPATH/bin:/usr/local/go/bin:$PATH

おわりに

もう、IDEをPCの中にインストールする時代は終わったのかも知れません。
これからは、サーバーサイドIDEをぜひお試しあれ!

31
34
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
31
34