5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

DockerでSassを使ってみた

Last updated at Posted at 2019-11-18

未来電子テクノロジーでインターンをしているtokky08です。
Dockerについて勉強したのでアウトプットとして書いていきます。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#Dockerって何?
コンテナ型仮想化技術のことです。
パソコンの中にもう一つパソコンを作るイメージです。

#DockerとVMの違いとは

VM

  • OSのバージョンの違いなどで構築に手間がかかる
  • オーバーヘッドが大きい

Docker

  • 仮装環境はコンテナと呼ばれるもので、オーバーヘッドが小さい
  • 環境構築が容易

VMと違ってDockerは仮想化の単位ごとにOSを持つ必要がないため、より少ないリソースで素早く動作させることができる。

#イメージって何?
コンテナを起動するのに必要な設定ファイルをまとめたもの。
このイメージはDocker Hubからpullすることが多いです。

#コンテナって何?
イメージから作られるもの。
ミドルウェアの環境構築がされた実行環境。

#DockerでSassを使う

SASSのSCSS記法を触ってみたRuby
こちらの記事を参考にしました。

ファイル構成はこんな感じです。

docker-sass
      - Dockerfile
      - docker-compose.yml
      - css
          - style.scss
Dockerfile
FROM ruby:2.5.1

RUN gem install sass
docker-compose.yml
version: '2'
services:
  scss:
    build: .
    volumes:
      - .:/var/www/scss
    stdin_open: true
    tty: true

sassをインストールするためrubyの環境構築を行います。その上でsassをインストールします。これがDockerfileの内容です。

$ docker-compose up -d

このコマンドでdocker-compose.ymlに記述した設定からコンテナ起動します。-dはバックグラウンドで行うって感じです。

$ docker exec -it コンテナ名 bash

execでコンテナの中に入ります。
これで、一応流れとしてはひとまず終わりです。あとは、sassを使っていこうって感じです。

ファイル編集をホスト側で行い、その編集をコンテナ内にも反映させて作業を行います。これをバインドマウントを行うといいます。バインドマウントは-v ホスト側のパス:コンテナ側のパスオプションで実行できますが、今回はdocker-compose.ymlに記述してます。

volumes:
      - .:/var/www/scss

ここです。.がホスト側のパスで/var/www/scssがコンテナ側のパスです。
さて、execでコンテナ内に入ったのでvar/www/scssに移動します。

root@2ffc40c8a946:/# cd var/www/scss
root@2ffc40c8a946:/var/www/scss# ls
Dockerfile  css  docker-compose.yml

見事、ホスト側にある[Dockerfile/css/docker-compose.yml]がコンテナ内にあることが確認できました。
cdコマンドでcssフォルダ内に移動します。

$ sass --watch style.scss:style.css

このsassコマンドを実行して、ホスト側で.scssファイルを編集してみましょう。

root@2ffc40c8a946:/var/www/scss/css# sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: style.scss
      write style.css
      write style.css.map

見事、sassコマンドが機能しました。ホスト・コンテナ側両方のファイルをみてみると、新たにstyle.cssstyle.css.mapファイルが作成されていることが分かります。

これがバインドマウントを用いてファイル編集をする流れでした。

#まとめ
以前、sassの勉強会を開いた時windowsやubuntuの方がrubyの環境開発に苦戦していたのでDockerを使えばめっちゃ簡単じゃんと勉強して思いました。まだまだDockerについてよく分からない部分はありますがこれからも勉強して使いこなせるようにしたいです。勉強会を開く時などは環境構築が1番の山場だと言っても過言ではないのでDockerを使えば全員簡単に同じ環境が構築できるのですご!!と思いました。これからはDocker使わなければ・・・

5
5
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
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?