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

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

More than 1 year has passed since last update.

当記事は、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をぜひお試しあれ!

ssaita
基本的にWeb
teamgtgt
「Impact On The World」という理念のもと、マーケティングプラットフォームの『アドエビス』、リスティング広告運用プラットフォーム『THREe』、EC構築オープンソース『EC-CUBE』など、国内最大級のマーケティングソリューションを提供しています。
http://www.yrglm.co.jp/
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
ユーザーは見つかりませんでした