20200705のdockerに関する記事は13件です。

出来るだけ最小限でdocker-compose、nginx、phpの環境を作成してみた

私は初心者です。間違っていたりもっと良いやり方がありましたら教えていただけるとありがたいです

参考

こちらのリンクにコードを置きました

docker-compose.yml
version: "3"

services:
  web:
    image: nginx
    ports:
      - "8080:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
      - ./myapp:/var/www/html
    depends_on:
      - php

  php:
    image: php:7-fpm
    volumes:
      - ./myapp:/var/www/html

phpのサービスだけで、/var/www/html にファイルをマウントしたら良いかと思ったのですが、htmlが表示されず(ファイルがなくて404になる)webのサービスの方でも/var/www/htmlマウントしました

default.conf
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    root /var/www/html;

    location / {
        index  index.php index.html;
    }

    location ~ \.php$ {
       fastcgi_pass   php:9000;
       fastcgi_index  index.php;
       fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
       include        fastcgi_params;
    }
}
myapp/index.php
<?php
phpinfo();
docker compose up -d

image.png

以上です。m(_ _)m

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Kiwi TCMSをお試しする環境作成

Kiwi TCMSは、オープンソースのテスト管理システムです。
ちょっと試して見ようと思い 1 、動くところまでやったので手順のまとめです。

環境

  • Windows 10 Pro 2004
  • Ubuntu 20.04 on WSL2
  • Docker version 19.03.12

手順

ここに書いている内容に沿って、以下の感じで進めていきます。

$ docker pull kiwitcms/kiwi
<snip>
$ curl -O https://raw.githubusercontent.com/kiwitcms/Kiwi/master/docker-compose.yml
<snip>
$ docker-compose up -d
Creating network "dev_default" with the default driver
Creating volume "dev_db_data" with default driver
Creating volume "dev_uploads" with default driver
Creating kiwi_db ... done
Creating kiwi_web ... done
$ docker exec -it kiwi_web /Kiwi/manage.py migrate
Operations to perform:
  Apply all migrations: admin, attachments, auth, bugs, contenttypes, core, django_comments, kiwi_auth, linkreference, management, sessions, sites, testcases, testplans, testruns
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
<snip>
$ docker exec -it kiwi_web /Kiwi/manage.py createsuperuser
Username: test
Email address: test@example.com
Password:
Password (again):
Superuser created successfully.
$ docker exec -it kiwi_web /Kiwi/manage.py set_domain localhost
Domain updated successfully.

ここまでやったら、ブラウザから https://localhost に接続すると以下のような画面が開きます。
上のコマンドで作成したユーザーとパスワードでログインできます。
opening.png

ログインするとこんな感じ。
login.png

おまけ

トラブルシューティングとして、デバッグモードでトレースバックを表示するようにする方法も書いてあります。
docker-compose.ymlと同じ階層に、debug.pyなどとしてファイルを作成します。

# -*- coding: utf-8 -*-

DEBUG = True

その後、docker-compose.ymlのweb側に以下のように書き加えて再起動します。

        volumes:
            - uploads:/Kiwi/uploads:Z
+           - ./debug.py:/venv/lib64/python3.6/site-packages/tcms_settings_dir/debug.py

これでエラーが発生した際は、トレースバックが表示されるようになります。


  1. 実際に試すのはこれから。 

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ポートフォリオを作成するための学習項目

金融の情報システム部門で働いています。
社内SEのポジションですが、事務屋としての仕事の割合が多いです。
会話の中で技術的な話になることはあれど、実際に自分自身で何かを作ることがないため、これからの自分の立ち位置に非常に不安を抱えています。
なので、将来的な転職も選択肢に入れて、ポートフォリオを作成しようと考えています。
これまでに学習してきたこと、これから学習しようとしていることをまとめます。

コンピュータサイエンス基礎

「令和02年 イメージ&クレバー方式でよくわかる 栢木先生の基本情報技術者教室 情報処理技術者試験」

大学生の頃に受験して合格しました。
もう何年も前の話なので、応用情報技術者試験をそのうち受けようかと考えています。

Linux

「新しいLinuxの教科書」

後述するUdemyのDocker講座でもLinuxをコマンドの学習ができますが、改めて体系的に学ぼうと思います。

HTML/CSS

「これから学ぶHTML/CSS 」

1年目の時にお世話になりました。
忘れてしまっていることも多いので、都度読み返すことになりそうです。

JavaScript

「確かな力が身につくJavaScript「超」入門 第2版」

JavaScriptは全く未経験なのでこの機に勉強しようかと思います。

Python

「独学プログラマー Python言語の基本から仕事のやり方まで」

これは1年目の時に学習しました。

「Python2年生 スクレイピングのしくみ 体験してわかる!会話でまなべる!」

こちらは最近読みました。
非常にわかりやすかったです。
foliumを使って地図上にプロットできたときはちょっと感動しました。

Django

「Python Django 超入門」

「独学プログラマー」の本を読んだ後にこちらを学習しました。
Webのチュートリアルなどもやってみたものの、自分自身でアプリを1から作ることはまだできていません。
これも、bootstrapでデザインを整えた時にちょっと感動しました。
チュートリアルではなく、1から再チャレンジします。

Docker

米国AI開発者がゼロから教えるDocker講座

https://www.udemy.com/course/aidocker/
Udemyの動画講座です。学習は書籍の方が良いと思っていましたが、動画は画面の動きを見ながら学習できるのでわかりやすいです。
14時間というボリュームのある学習内容も、2倍速で視聴できるので素早く学習できます。
ちょうど今学習中です。

入門Docker

https://y-ohgi.com/introduction-docker/
こちらもDockerの勉強ができます。
前述の動画講座は5000円ほどしますが、こちらは無料です。

AWS

「Amazon Web Servicesインフラサービス活用大全 システム構築/自動化、データストア、高信頼化 impress top gearシリーズ」

AWSでアプリを動かすことができるまで経験しないと未経験では転職は厳しそうですし、
仮に採用されたとしても労働条件は良いものにならないだろうと思います。

CircleCI

「いまさらだけどCircleCIに入門したので分かりやすくまとめてみた」
https://qiita.com/gold-kou/items/4c7e62434af455e977c2
何をするものなのかも正直知りません。
これから勉強していきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

VS CodeのDevContainerをVMなどssh接続先で使う

tl;dr

  • 環境変数DOCKER_HOST、設定docker.host使わない
  • docker contextを使ってSSH接続先のdockerを使えるようにする
    • docker context create remote --docker 'host=ssh://user@remote-host
    • docker context use remote
  • コマンド "Remote-Containers: Open Repository in Container..."でリポジトリを直接開く

目的

macOSではDocker Desktop for macが多少性能が辛いので、やはり外部マシンやVM(以降、リモートホストと呼ぶ)上のDockerを使いたくなる。
Docker Desktop を使っている場合、コマンド"Remote-Containers: Reopen in Container"を実行すればすぐに利用できるが、リモートホストのDockerを使う場合の方法をまとめる。

一次情報

Googleで検索すると、環境変数 DOCKER_HOST や、設定 docker.hostを使った方法が見つかるが、現在はそれは推奨されていない様子。

https://code.visualstudio.com/docs/containers/ssh#_set-up-ssh-tunneling

環境準備

以下の準備が整っているとする。

  • リモートホストにsshで認証鍵を使ってアクセスできる状態であること。
  • リモートホストでdockerがrootで実行され、そのdockerにログインユーザの権限でアクセスできること。
    • Rootlessは未対応だった
    • sudoを付けずにdockerコマンドが使えること(sudo usermod -aG docker $USERが実行されていること)
  • ローカルにdockerクライアントがインストールされていること(Docker Desktopが、起動はしていなくともインストールされていること)
  • リポジトリはgithub.comでほすとされていること
  • リモートホストからリポジトリにアクセスできること

手順

docker contextでリモートホストのdockerにアクセスできるようにする

リモートホストのDockerを使う場合、パラメータ-Hを使って使う先のDockerデーモンを指定する。
この時、必ずuser名を指定する(リモートホストと同じユーザ名出会っても必要)。

docker -H ssh://user@remote-host ps

これを、docker contextを使って、この設定をコンテキストremoteとして保存する。

docker context create remote --docker 'host=ssh://user@remote-host'

コンテキストのリストはdocker context lsで確認できる。

docker context ls

NAME                DESCRIPTION                               DOCKER ENDPOINT                     KUBERNETES ENDPOINT   ORCHESTRATOR
default             Current DOCKER_HOST based configuration   unix:///var/run/docker.sock                               swarm
remote *                                                      ssh://nnyn@remote-host                                         
rootless                                                      unix:///run/user/1000/docker.sock  

コンテキストを有効にするため、docker context useを実行する。すると、パラメータ-HなしにリモートホストのDockerデーモンにアクセスできるようになる。

docker context use remote
docker ps

リモートホストに複数のDockerデーモンがある場合、一度SSHでログインし、その中でdocker contextで指定する。

ssh remote-host
docker context ls

NAME                DESCRIPTION                               DOCKER ENDPOINT                         KUBERNETES ENDPOINT                 ORCHESTRATOR
default             Current DOCKER_HOST based configuration   unix:///var/run/docker.sock             https://104.198.114.144 (default)   swarm
rootless *                                                    unix:///home/nnyn/var/run/docker.sock  

docker use default

.devcontainer/devcontainer.json を作成する

一旦ローカルでリポジトリをチェックアウトし、リポジトリにDevContainerの設定である.devcontainer/devcontainer.jsonを追加し、コミットし、リポジトリにpushする。

このサンプルは https://github.com/microsoft/vscode-dev-containers/tree/master/containers のリポジトリで公開されているため、このリポジトリからDockerfile含めてコピーしてくると良い(後から編集可能)。

リモートホスト上でDevContainerを開く

ローカルのVS Code(リモートSSH状態ではない)で、コマンド"Remote-Containers: Open Repository in Container..."を実行し、リポジトリを指定する。github.comの場合、74th/vscode-typescript-handsonのようにgithub.comは省略する。

vscode.png

vscode2.png

すると、リモートホスト上でリポジトリのチェックアウトが行われ、DevContainerとして起動する。

vscode3.1.png

終了する

VS CodeのWindowを閉じると、接続は切れるが、Dockerコンテナ自体は起動したままになっている。

ssh remote-host
docker ps                                                                                                                    

CONTAINER ID        IMAGE                                                            COMMAND                  CREATED             STATUS              PORTS               NAMES
a5a03aabd34c        vsc-vscode-typescript-handson-766edd70c4c481fbe7625792ad38d7e2   "/bin/sh -c 'echo Co…"   48 minutes ago      Up 48 minutes                           loving_bassi

そのため、docker stopで停止させる。

docker stop loving_bassi

続きから開発を行う

停止させた状態から、DevContainerを起動して開発を始めるには、リモートタブから目的のコンテナを選択する。
これで、コンテナの起動から接続まで自動で行ってくれる。

vscode3.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

dockerでROSを動かす。(ホストでGUI【rviz】を起動)

Docker上でROSパッケージを動かして、ホストでrvizを動かす。

ここ1週間ぐらいで勉強したことです。(docker初心者です)

普段ローカル環境やanacondaの仮想環境でROSを動かしていたけど、
DockerでROSを動かした方が研究室の引き継ぎやPC間の移動が楽かなと思い、Docker導入してみた。
普段ローカル環境でROSを動かしていて(自分のPCにROSがあれば○)、
Docker上でもROSを動かしてみたい人が対象です。

環境

ubuntu 16.04
ros kinetic
 (なんでもいいはず)
Docker version 19.03.12(インストールは省きます)

leg_trackerを試す

こちらを試していきます。(これ以外すぐにdemoできるやつが見つからなかった)
https://github.com/angusleigh/leg_tracker.git

bagfileも公開しており、demoですぐ動くのでこちらをdocker上で動かして
ホストでrviz(GUI)の立ち上げをやっていきます。

今回はこちらをピックアップしてますが、手元にbagfile などがあれば、だいたいのパッケージは以下の手順で動きます。

1.docker用のフォルダを作成

下記のようなフォルダを以下のコマンドで作ってください。

$ mkdir -p ~/ros_docker/mount
$ cd ~/ros_docker/mount
$ git clone https://github.com/angusleigh/leg_tracker.git
$ cd ~/ros_docker && touch Dockerfile

ーros_docker(ファルダ)
|ーDockerfile(ファイル:拡張子なし)
|ーmount(フォルダ)
 |ーleg_tracker

2.Dockerfileを開いて以下を記入

FROM osrf/ros:kinetic-desktop-full

RUN mkdir -p /home/catkin_ws/src && \
    cd /home/catkin_ws/src && \
    /bin/bash -c "source /opt/ros/kinetic/setup.bash; catkin_init_workspace" && \
    cd /home/catkin_ws && \
    /bin/bash -c "source /opt/ros/kinetic/setup.bash; catkin_make" && \
    echo "source /opt/ros/kinetic/setup.bash" >> ~/.bashrc && \
    echo "source /home/catkin_ws/devel/setup.bash" >> ~/.bashrc && \
    echo "export ROS_PACKAGE_PATH=\${ROS_PACKAGE_PATH}:/home/catkin_ws" >> ~/.bashrc && \
    echo "export ROS_WORKSPACE=/home/catkin_ws" >> ~/.bashrc

ENV DEBCONF_NOWARNINGS yes
RUN apt-get update && apt-get upgrade -y && \
    apt-get install -y python-scipy && \
    curl -kL https://bootstrap.pypa.io/get-pip.py | python && \
    pip install munkres && pip install pykalman

WORKDIR /home/catkin_ws/

3.host側の準備

今回はhttps://github.com/angusleigh/leg_tracker
にある通りroslaunch leg_tracker demo_stationary_simple_environment.launchを起動します。なのでコンテナではrvizは起動しないので、mountフォルダにあるdemo_stationary_simple_environment.launchをhost側から好きなエディタでrvizのコメントアウトをしてください。

<!-- コメントアウト --> 
<!-- run rviz --> 
  <!-- <node pkg="rviz" type="rviz" name="rviz"
    args="-d $(find leg_tracker)/rosbags/demos/rviz/demo_stationary_simple_environment.rviz"/>   -->

準備完了、、、おそらく。

4.docker buildする

pull は自動でやってくれるので省略

$ cd ~/ros_docker && sudo docker build --tag ros:leg .
###最初だけ時間かかります###
###確認###
$ sudo docker images -a
###以下のようになっていればおk
REPOSITORY                     TAG  ,,,,,,(省略),,,,,,                       
ros                            leg  ,,,,,,(省略),,,,,,

5.docker run する

一回きりなので --rm オプションをつけてます。(何回か使う場合は外してください)
今回一番共有したかった事!!!
hostでrvizを立ちあげるので、--net=hostとする。

sudo docker run -it --rm  \
    -v ~/ros_docker/mount:/home/catkin_ws/src \
    --name sample \
    --net=host \
    ros:leg bash
###以下コンテナでの作業

6.catkin_make する

rootで入ってしまうのでこのあたりは改善の余地ありですが、基本的に問題無いかと思います。
再度読み込みも。

root@XXXXX:/home/catkin_ws# catkin_make

###こんな感じ###
####
#### Running command: "cmake /home/catkin_ws/src -DCATKIN_DEVEL_PREFIX=/home/catkin_ws/devel -DCMAKE_INSTALL_PREFIX=/home/catkin_ws/install -G Unix Makefiles" in "/home/catkin_ws/build"
####
root@XXXXX:/home/catkin_ws# source /home/catkin_ws/devel/setup.bash

7.コンテナでroslaunch する

root@XXXXX:/home/catkin_ws# roslaunch leg_tracker demo_stationary_simple_environment.launch

コンテナでの作業おしまい。
さてここでrvizを立ち上げたいのですが、再度コンテナ(sample)に
sudo docker exec -it sample bash で入ってもいいですが、CUIの操作(rostopic echo など)ならできますが、GUIを系はできないので(設定すればできますが今回は極力簡単かつ普段の使用感と同じであることを目指しました。)
host側でrvizを起動します。

8.rvizで確認する

$ rviz

必要あればaddからtopicを追加
rvizで立ち上がれば完了、、、。

9.最後に

コンテナはexitすれば削除されます。image も必要なければ docker rmi ros:legで削除
また再度使うようであれば --rm オプションを外してください。
そして2度目以降は
docker start sample && docker exec -it sample bash で
catkin_makeせずにコンテナがすぐに使えます

rosのipなどでホスト側にroscoreするなどありましたが、以下の問題からかmessageが受け取れずこのようにしました。
https://qiita.com/ossyaritoori/items/b2336451583ce40d1b9a

だれかのお役に立てれば幸いです。

参考文献

https://github.com/angusleigh/leg_tracker
https://qiita.com/tomoyafujita/items/07937a25bc48aa076056
https://qiita.com/ossyaritoori/items/b2336451583ce40d1b9a
https://qiita.com/tnarihi/items/275c009e9dec1306893f
https://datawokagaku.com/whatisdocker/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Pythonで大学の未開始の課題をLineに通知させてみた・・・!

概要/理由

・ Pythonで自分の大学の課題サイトをスクレイピングをして、未開始の課題を収集しLineに通知させることをしました。
・理由:最近、スクレイピングにハマり、これを自分の日常に役立つものに生かしたいなと考えた。大学の課題が多すぎて、提出し忘れることがあるのでやっていない課題を知らせてくれると便利だなと考え作ってみた。

全体の流れ

  1. Dockerで環境構築
  2. スクレイピングコードをかく
  3. Line NotifyでLineに通知
  4. AWS Lambdaにデプロイし定期実行させる

使ったもの・ライブラリー等

  • Python のライブラリー
    • selenium
    • Beautifulsoup4
    • requests
  • その他
    • Docker
    • python3.6
    • Line notify
    • AWS Lambda

詳細な流れ

①環境構築

Dockerで環境構築するのだが、Lamdaにデプロイすることを考え、serverless-chromeを使った。
環境構築はこちらが参考になった。
Dockerに
・severless-chrome
・chromedriver
requirements.txtに
・selenium
・Beautifulsoup4
・requests 
を書いていく。
そしてDockerイメージを作成

②スクレイピングコードをかく

大まかな流れは、
seleniumでログイン→課題ページのURLを取得
その後、課題ページの一覧から「期限が来てない&未開始になっている」課題を収集

③Line Notify

Line Notifyの使い方はこちらの記事を参考にしました。
登録して、数行コードを書くだけなので簡単です。

④AWS Lambadにデプロイ&定期実行

大まかな流れはこちらをそのまま使わせていただきました。
・コードのフォルダーをS3にアップロード
・Lambda関数の作成
・テストを作成し、Lineに通知されることを確認。
・LambdaからトリガーにAmazon CloudWatch Eventsを追加させ、定期実行させる。完成!

感想・今後に・・・

・思っていたよりLineやAWSとの連携が簡単だったので今後も使っていきたいですね。
・PDFのダウンロードの自動化にも挑戦したい!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Docker上のcomposer install時にメモリ不足をお手軽に解消する Tips

結論

$ COMPOSER_MEMORY_LIMIT=-1 composer install
  • COMPOSER_MEMORY_LIMIT=-1をオプションにつけて実行する

参照記事とか

docker上のphpコンテナでcomposer installしたら、メモリ不足で落ちた話
を参照に、php.iniを編集しても問題はありませんでしたが、もっとお手軽な方法が。

php.ini
  memory_limit = -1

composerにはCOMPOSER_MEMORY_LIMITの環境変数が使える

$ COMPOSER_MEMORY_LIMIT=-1 composer install

composer updateでmemoryが足りない場合の対応方法 その2

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

nginxコンテナを使ってみる②(アクセス制限)

nginxでアクセス制限をしてみる。

IPアドレス制限

設定ファイルでdenyまたはallowを定義する。
引数はIPアドレス または allという文字列。
IPドレスはCIDRで範囲指定可能。

deny 172.21.1.1
deny 172.21.0.0/16
allow all

さっそく設定ファイルをいじってみる。

コンテナ起動
[ec2-user]$ docker container run -d -p 80:80 --name nginx nginx:latest
2a01374534f5997dd2b44a8422b63eccff0d6a1ce21b82aa6f6dc3b10928de89
[ec2-user]$
[ec2-user]$ docker container ls -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
2a01374534f5        nginx:latest        "/docker-entrypoint.…"   4 seconds ago       Up 3 seconds        80/tcp              nginx
[ec2-user]$
設定ファイル修正
root@6775ebb4074c:~# vi /etc/nginx/nginx.conf
bash: vi: command not found
root@6775ebb4074c:~#

viが入っていない、、入れるか。

yumも入っていない
root@6775ebb4074c:~# yum install -y vim
bash: yum: command not found
root@6775ebb4074c:~#

yumも入ってない、、う~ん。

面倒になってきたので
ホスト側に設定ファイルをコピーしてきて
修正したのちコンテナ内に戻すことにした。

気を取り直して
まずは以下を設定ファイルに追加してみる。

deny all;

設定ファイルコピー(ホスト←コンテナ)
[ec2-user]$ docker container cp nginx:/etc/nginx/nginx.conf .
[ec2-user]$
設定ファイル修正
vi nginx.conf

~~ 前略 ~~

http {
    deny all;
    include       /etc/nginx/mime.types;

~~ 後略 ~~
設定ファイルコピー(ホスト→コンテナ)
[ec2-user]$ docker container cp ./nginx.conf nginx:/etc/nginx/nginx.conf
[ec2-user]$
設定ファイルのエラーチェック
[ec2-user]$ docker container exec nginx /bin/bash -c "nginx -t"
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[ec2-user]$
コンテナ再起動
[ec2-user]$ docker container restart nginx
nginx
[ec2-user]$ docker container ls -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
2a01374534f5        nginx:latest        "/docker-entrypoint.…"   10 minutes ago      Up 5 seconds        80/tcp              nginx
[ec2-user]$

ブラウザアクセス

image.png

たしかに拒否された。

allow IPアドレス;

allowで許可設定を行う。
allowやdenyを複数書いた場合は最初に該当したものが適用される。

せっかくなのでdeny allは残したまま
その前にallowを追加してみる。

設定ファイル修正
vi nginx.conf

~~ 前略 ~~

http {
    allow xx.xx.xx.xx;
    deny all;
    include       /etc/nginx/mime.types;

~~ 後略 ~~
設定ファイルコピー(ホスト→コンテナ)
[ec2-user]$ docker container cp ./nginx.conf nginx:/etc/nginx/nginx.conf
[ec2-user]$
設定ファイルのエラーチェック
[ec2-user]$ docker container exec nginx /bin/bash -c "nginx -t"
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[ec2-user]$
コンテナ再起動
[ec2-user]$ docker container restart nginx
nginx
[ec2-user]$ docker container ls -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS               NAMES
2a01374534f5        nginx:latest        "/docker-entrypoint.…"   28 minutes ago      Up 4 seconds        80/tcp              nginx
[ec2-user]$

ブラウザアクセス

image.png

想定どおり繋がった。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

AtCoderをVSCode+Dockerでできる環境構築をしてみた

TL;DR

環境構築してる暇があったら問題をといて精進したほうが良いです

はじめに

みなさんAtCoderやってますか?皆さんご存じのようにナウでトレンディーでセクシーな競技プログラミングコンテストですね。

サイトにはコードテスト機能があるので正直環境構築しなくても参加可能です。
しかし、手元で管理できる環境を構築したほうが幾分楽に動かせますよね!...ということでVSCode+Dockerで環境構築を行ってみました。

クリックするだけですべてが実行できる簡単環境を目指してます。
oj_download_test.gif

  • online-judge-toolsを使った入力のダウンロード/テスト/提出
  • streamlit+networkxでのグラフ問題可視化
  • 他にvscodeでの便利なextensition、debugなどなどの設定

↑上記3つをできるようにしています。言語としてはPythonとC++を使えるようにしてます。他にもGitでの管理なども可能です。

https://github.com/yamatia/atcoder_docker_sample

にあげているので、コピーして手軽に使うことも可能です。

対象

一か月前の自分(もしくは環境構築でお悩みの人)

online-judge-toolsとは?

こちらが開発者様のgithubです。ぜひstarを送りましょう。
AtCoderに限らず、いくつかの競技プログラミングサイトにおける典型的な作業を自動化してくれます。
34708715-568b13c0-f557-11e7-97ef-9f6b646e4776.gif

とても便利です。サンプルケースのダウンロードや、ジャッジテスト、提出などを手軽に行うことができます。
他にもいくつかの機能があります。

networkxとは?

pythonで使用可能なモジュールです。様々なグラフ問題を可視化することが可能です。

今回は可視化のために使っていますが、AtCoderで使用可能で問題を解くこともできます。少し重いので入力ケースによってはTLEになりますが,,,

ABC168 D - .. (Double Dots)を解いてる例

d.py
import networkx as nx
n,m=map(int,input().split())
s=[list(map(int,input().split())) for i in range(m)]

g=nx.Graph()
g.add_nodes_from([i for i in range(1,n+1)])

for x in s:
    g.add_edge(x[0],x[1])
di=nx.predecessor(g,source=1)

if len(di)!=n:
    print("No")
    exit()

print("Yes")
for x in range(2,n+1):
    print(di[x][0])

導入

簡単な導入&立ち上げ方法です。わかる人はスキップ推奨。

前準備が少し面倒ですが、vscode+dockerさえできればあとはお手軽に導入できます。

  1. 前準備

    vscode+dockerが動かせる環境が必要です。
    導入については下記参照:
    https://code.visualstudio.com/docs/remote/containers
    https://code.visualstudio.com/blogs/2020/03/02/docker-in-wsl2

  2. gitからのダウンロード

    githubからのダウンロード方法です。

    terminal
    git clone https://github.com/yamatia/atcoder_docker_sample.git
    
  3. VSCodeで開く

    左下の緑色の><マークをクリックして、Remote Containers:Open Foleder in Containerから1でダウンロードしたatcoder-docker-samlpeをクリックする

    初回は少し時間がかかりますが、dockerイメージがビルドされて実行可能になります。

    ※docker imageのサイズが大きいですが、不満な人はdevcontainer.jsonからextensionを適宜削除してください

  4. atcoderへのログイン

    online-judge-toolsでの提出を行うのであればログイン作業が必要です。
    以下を入力するとユーザー名とパスワードを求められるので適宜入力してください。

    docker_terminal
    oj login https://atcoder.jp/
    

    ※seleniumがインストールされていない旨が通知されますが特に入れなくても大丈夫です。

    使い方

    基本は解法ファイルを作成-->タスクランナーでポチポチすれば各種実行できます。超簡単です。

  • コンテストの解法はfield以下に収める事を想定してます。/field/contest/abc168/d.pyのようにフォルダで管理するか、/field/other_problems/abc168_d.pyのように問題で管理することができます。

    ※.gitignoreには/field/contestsを記載しているので、この部分はGitしても上がりません。なのでPASTの問題などをここで管理して賠償問題事故などをおこさないようにしています。

  • 基本的に、解法ファイルを作成する以外の操作はすべてタスクランナーでGUIから実行可能です。解法ファイルを開いた状態で、左下のTASK RUNNNERから以下の5つを選択することで操作できます。

  1. oj_download&test
    online-judge-toolsのdownloadとtestをいい感じに実行するようにしています。

    フォルダ名とファイル名から、atcoderの問題URLにアクセスし、tmp以下に問題ファイルをダウンロード、実行テストという作業をまとめて行っています。

    ※企業コンなどで時に問題URLに辿り着けないことがあるので、その時はterminalから入力を求められます。
    oj_download

  2. oj_submit

    online-judge-toolsのsubmitを実行するようにしてます。これでatcoderへの提出が行えます。

    oj_test

    (※1つ注意点として、そのままだと実行時にoj側から最後にエラーメッセージが表示されます。しかしコンテストページを見るとわかるのですが、提出はできています。
    これは、online-judge-toolsの挙動として、ファイル提出後にwebbrowserで提出画面を自動で開こうとするのですが、dockerからホストのブラウザが参照できないことが原因です。提出後にブラウザで開いてほしい人はdocker立ち上げ周りを弄ってmountしたり適宜パスを追加すればいいと思います。)

  3. clean tmp folder

    上記1を実行すると、tmp以下にsampleファイルがたまっていくので、その掃除用です。実行すると、1日以上前にダウンロードしたファイルを削除します。

  4. cpp runner

    C++の実行ファイル(.cpp形式)をコンパイル、実行します。入力はterminalから行ってください。
    ※ちなみにpythonファイルについては右上の再生ボタンマークをクリックすれば実行できます。

  5. graph viewer

    streamlitによるグラフ問題の簡易な可視化用です。
    実行すると、https://localhost:8501/でブラウザからアクセスできます。

    graph

    基本的に上からポチポチ操作すれば、対応してるグラフ形式であればnetworkxによる可視化が可能です。他には、サイドバーからグラフの描画設定をいじることができます。一応保存も可能です。

    終わったらCtr+Cなどで閉じてあげてください。

  • 他には、pythonとc++についてはF5でvscodeのデバッグを実行できます。c++についてはstep overで末端まで進んでしまうとエラーメッセージが流れることもあり少し微妙です。SnapCrab_NoName_2020-7-5_11-59-53_No-00.png

ちょっとだけ説明

今回の構成は、vscodeのextentionのTask Runnnerを便利に使えるよ!というのが主軸です。

/.vscode/task.jsonを編集することで自分でカスタマイズした自動化操作を実行できます。

task.json
"version": "2.0.0",
    "tasks": [
        {
            "label": "oj_download & test",
            "type": "shell",
            "command": "python",
            "args": [
                "${workspaceFolder}/scripts/oj_test.py",
                "${file}"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": [],
        },

例えば、今回デフォルトタスク(ショートカットキーで起動できる)に設定しているものはこんな感じです。

"command"で実行するコマンド、"args"で引数を渡すことができます。↑だと、アクティブなファイル名(e.g."/workspaces/atcoder/field/contests/abc168/d.py")を引数として渡してoj_test.pyを実行しています。

他にも、シェルスクリプトの実行であったり、${file}のようにvscodeのカスタム変数を使えるので便利です。

もっと詳しいのは↓から
Visual Studio Code Variables Reference


他にも、スニペットをカスタマイズすることで入力をある程度自動化できます。

py_atcoder_snippet.code-snippets
{
    "input_line int(single)":{
        "prefix":"input",
        "body":["int(input())"],
        "description":"input int(single)",

例えば、↑ですとinputと入力したときに"body"部分のコードをテンプレとして呼び出すことができます。このくらいの量なら短いので手入力でもいいのですが、↓のUnion-Findのような毎回書くのは面倒なものはライブラリとして登録しておくと楽ですね。

class UnionFind():
    def __init__(self, n):
        self.parents = list(range(n))
        self.rank = [0] * n

    def find(self, x):
        if self.parents[x] == x:
            return x
        else:
            self.parents[x] = self.find(self.parents[x])
            return self.parents[x]

    def union(self, x, y):
        x = self.find(x)
        y = self.find(y)

        if x == y:
            return

        if self.rank[x] < self.rank[y]:
            self.parents[x] = y
        else:
            self.parents[y] = x
            if self.rank[x] == self.rank[y]:
                self.rank[x] += 1

これらの機能はかなり便利なのでおすすめです。

他の細々したファイルの説明が気になる方は、Githubのページではもう少しだけ詳しく書いてるのでそちらごらんください。

まとめ

vscode+dockerで使える便利な機能を使い倒してAtCoderのお手軽環境を整えてみました。

まるまるコピーしても使えますし、.devcontainersとrequirements.txtだけコピーしていじっても幾分docker構築が楽になると思います。ご参考になれば。

Task Runnerで操作を自動化できるし、スニペットなども使えるvscodeは神。信仰心が高まりますね。。

残念ながら環境構築に時間を割くと満足感ましましで便利にはなりますが、実力は伸びません(一敗)。。。
試験前にプリントをきれいにファイリングする現象と同じですね。

なので環境構築がまだの方は適度にコピーして、効率的な精進に励みましょう!(ブーメラン)
もし「お前の環境構築はまだまだだ...!私の環境こそ至高...!」という方いたら是非アドバイスください。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

既存のrails6のアプリにMySQLでDockerを導入する。

初心者ですが既存のrails6のアプリにMySQLでDockerを導入できたので備忘録として記事を残します。
もし間違っていたら教えていただきたいです。

Ruby on Rails 「途中まで作ったアプリにDockerを導入したい」に挑戦してみる(MySQL / Sequel Pro)

基本的にはこちらの方の記事を参考にさせていただきました。

1 Dockerfile/docker-compose.ymlを既存アプリのルートディレクトリに作成する。

2 Dockerfileを編集する

Dockerfile
FROM ruby:2.6

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs      

RUN mkdir /app_name 

ENV APP_ROOT /app_name 
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN gem install bundler 
RUN bundle install
ADD . $APP_ROOT

FROM ruby:2.6 について

私のアプリはruby2.6.2で作られているので、このように記述しました。

3 docker-compose.ymlを編集する

docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: 'password'
    ports:
      - "4306:3306"

  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app_name
    ports:
      - "3000:3000"
    depends_on:
      - db

基本的には参考記事通りです。

4 database.yml編集する。

config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  socket: /tmp/mysql.sock
  host: db
  # host: localhost これは以前までのもので一応コメントアウトで残しておきました。

development:
  <<: *default
  database: 自分のDBの名前

5 docker-compose build でコンテナを作成する。

[自分のアプリ名] $ docker-compose build 
これで新たにDockerのコンテナが作成されます。

一番最初だけ時間がかかるので気長に待ちましょう。

6 Dockerコンテナ上でDB作成&migrationを実行

rails6の場合ここで以下のようなエラーが出ると思います。
ySQL Community Server (GPL)
web_1  | => Booting Puma
web_1  | => Rails 6.0.3.1 application starting in development 
web_1  | => Run `rails server --help` for more startup options
web_1  | sh: 1: yarn: not found
web_1  | 
web_1  | 
web_1  | ========================================
web_1  |   Your Yarn packages are out of date!
web_1  |   Please run `yarn install --check-files` to update.
web_1  | ========================================
web_1  | 
web_1  | 
web_1  | To disable this check, please change `check_yarn_integrity`
web_1  | to `false` in your webpacker config file (config/webpacker.yml).
web_1  | 
web_1  | 
web_1  | 
web_1  | 
web_1  | 
web_1  | Exiting

このエラーを解消したいのでエラー文通りに

config/webpacker.yml
  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: false
このようにfalseに変えることでエラーを解消できました。

参考記事
yarnが原因でdocker-compose up ができない ( Your Yarn packages are out of date!)」に挑戦してみる(MySQL / Sequel Pro)

本題に戻ります

[自分のアプリ名] $ docker-compose run web bundle exec rake db:create

このコマンドでDocker上にDBが作成されます。
レコードは最初からになるので注意してください。

[自分のアプリ名] $ docker-compose run web bundle exec rake db:migrate

migrateも忘れずに行いましょう。

7 docker-compose up でコンテナを起動する。

[自分のアプリ名] $ docker-compose up

これでローカルホストで表示できるようになりました。
コンテナが立ち上がったら
http://localhost:3000/
にアクセスしてみてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】Rails6 + Docker 環境構築 + Bootstrap4の導入

はじめに

DockerでRailsの環境を構築することが多いので手順を備忘録として書きます。
本記事ではDocker上にRail6の環境を構築することに加えてBootstrap4を導入するところまでの手順を記述しています。
コマンドの解説などはほとんど書いていませんので、参考に貼っている記事を参照されてください?‍♂️

自分の環境

  • Docker for mac
  • macOS Catalina ver 10.15.4

各種ファイルの作成

まず、ターミナル上で開発を行うディレクトリ内にプロジェクト用のディレクトリを作成します。
今回はプロジェクト名をmy_appとするのでディレクトリ名はmy_appにしておきます。

# 作業スペースに移動
cd work
# プロジェクト用のディレクトリを作成
mkdir my_app

次にDocker用のファイルやGemfileを作成します。

作成するファイル
- Dockerfile
- docker-compose.yml
- entrypoint.sh
- Gemfile
- Gemfile.lock

cd my_app
touch Dockerfile
touch docker-compose.yml
touch entrypoint.sh
touch Gemfile
touch Gemfile.lock

次にDockerfileを記述します。

Dockerfile
FROM ruby:2.7.1
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn

RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && \
apt-get install nodejs
RUN mkdir /my_app
WORKDIR /my_app
COPY Gemfile /my_app/Gemfile
COPY Gemfile.lock /my_app/Gemfile.lock
RUN bundle install
COPY . /my_app

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

次にdocker-compose.ymlです。

docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    environment:
      POSTGRES_PASSWORD: postgres
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/my_app
    ports:
      - "3000:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true

次にentrypoint.shです。

entrypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /my_app/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

次にGemfileです。

Gemfile
source 'https://rubygems.org'
gem 'rails', '6.0.3'

Gemfile.lockについては空のままで大丈夫です。

Dockerコマンドを叩く(プロジェクトの構築)

ターミナル上コマンドを叩いてでプロジェクトの構築を行います。

docker-compose run web rails new . --force --no-deps --database=postgresql

少し時間がかかりますが、以下のように出力が出れば成功です。

Webpacker successfully installed ? ?

次に以下のコマンドを叩いてgemなどを入れます。

docker-compose build

次のように出れば成功です。

Successfully tagged my_app_web:latest

次にデータベースの設定をします。
作成されたRailsプロジェクトの/config/database.ymlを以下のように編集します。

database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: postgres
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: 5

development:
  <<: *default
  database: my_app_development

以下のコマンドを叩いてbashに入ります。

docker-compose run --rm web bash

bashに入れましたら、次のコマンドを叩いてdbを作成します。

rails db:create

ここでgemがないというようなエラーが出る場合は一度bashを抜けて再度docker-compose buildします。その後、同様の手順を行ってください。

dbの作成が成功しましたら、exitでbashを抜けるか、新規ウィンドウを開いて、作業ディレクトリに移動し以下のコマンドを叩きます。

docker-compose up

色々と文字が出て最後が以下の出力が出るはずです。

 Use Ctrl-C to stop

ブラウザからlocalhost:3000にアクセスします。
以下のページが表示されれば成功です。

スクリーンショット 2020-07-05 2.21.09.png

bootstrapの導入

続いてbootstrapの導入です。
まず、/app/javascript/packs/application.jsに以下を追記します。

application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//以下の2行
import 'bootstrap';
import '../stylesheets/application.scss';

続いて/app/javascript以下にstylesheetsディレクトリを作成し、さらにその中にapplication.scssを作成します。
パスは/app/javascript/stylesheets/application.scssとなります。

次に今作成したapplication.scssに以下を書きます。

application.scss
@import '~bootstrap/scss/bootstrap';

続いて再度Dockerのbashに入ります。

docker-compose run --rm web bash

bashに入りましたら、以下のコマンドを叩きます。

yarn add jquery bootstrap popper.js

処理が完了しましたら、exitでbashを抜けて、先ほど立ち上げたサーバーをC-cで停止します。
サーバーが止まりましたら、一度docker-compose downします。

docker-compose down

続いてDockerのbashに入ります。

docker-compose run --rm web bash

bashに入りましたら、次のコマンドを実行します。

yarn install --check-files

ここまでできましたら、作業完了です。

確認

bootstrapが入っているか確認する際には、以下のテストコードをどこかしらのviewに貼り付けて、確認するのが良いかと思います。

test_view.html.erb
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

bootstrapが反映され、開発者ツールを開いた際にエラーが出ていなければ成功です。
スクリーンショット_2020-07-05_3_37_52.png

ここで、application.js:1 Uncaught Error: Cannot find module 'bootstrap'
とエラーがでた場合は再度、以下のコマンドを叩いて、再度確認してみてください。

yarn add jquery bootstrap popper.js

最後に

Railsを使うことが多いので、備忘録として残しました。
自分もDockerファイルなどの書き方について、よくわかっていない部分が多く、他の方の記事を大いに参考にしながら環境を作りました。ありがとうございます?‍♂️
Rails6では環境を作る際にwebpack,yarn関係でつまづくことが多いと思います。
至らない点など多いと思われますが、参考にしていただければ幸いです。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】Rails6 + Docker で環境構築 + Bootstrap4の導入

はじめに

DockerでRailsの環境を構築することが多いので手順を備忘録として書きます。
コマンドの解説などはほとんど書いていませんので、参考に貼っている記事を参照されてください?‍♂️

自分の環境

  • Docker for mac
  • macOS Catalina ver 10.15.4

各種ファイルの作成

まず、ターミナル上で開発を行うディレクトリ内にプロジェクト用のディレクトリを作成します。
今回はプロジェクト名をmy_appとするのでディレクトリ名はmy_appにしておきます。

# 作業スペースに移動
cd work
# プロジェクト用のディレクトリを作成
mkdir my_app

次にDocker用のファイルやGemfileを作成します。

作成するファイル
- Dockerfile
- docker-compose.yml
- entrypoint.sh
- Gemfile
- Gemfile.lock

cd my_app
touch Dockerfile
touch docker-compose.yml
touch entrypoint.sh
touch Gemfile
touch Gemfile.lock

次にDockerfileを記述します。

Dockerfile
FROM ruby:2.7.1
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn

RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && \
apt-get install nodejs
RUN mkdir /my_app
WORKDIR /my_app
COPY Gemfile /my_app/Gemfile
COPY Gemfile.lock /my_app/Gemfile.lock
RUN bundle install
COPY . /my_app

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

次にdocker-compose.ymlです。

docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    environment:
      POSTGRES_PASSWORD: postgres
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/my_app
    ports:
      - "3000:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true

次にentrypoint.shです。

entrypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /my_app/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

次にGemfileです。

Gemfile
source 'https://rubygems.org'
gem 'rails', '6.0.3'

Gemfile.lockについては空のままで大丈夫です。

Dockerコマンドを叩く(プロジェクトの構築)

ターミナル上コマンドを叩いてでプロジェクトの構築を行います。

docker-compose run web rails new . --force --no-deps --database=postgresql

少し時間がかかりますが、以下のように出力が出れば成功です。

Webpacker successfully installed ? ?

次に以下のコマンドを叩いてgemなどを入れます。

docker-compose build

次のように出れば成功です。

Successfully tagged my_app_web:latest

次にデータベースの設定をします。
作成されたRailsプロジェクトの/config/database.ymlを以下のように編集します。

database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: postgres
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: 5

development:
  <<: *default
  database: my_app_development

以下のコマンドを叩いてbashに入ります。

docker-compose run --rm web bash

bashに入れましたら、次のコマンドを叩いてdbを作成します。

rails db:create

ここでgemがないというようなエラーが出る場合は一度bashを抜けて再度docker-compose buildします。その後、同様の手順を行ってください。

dbの作成が成功しましたら、exitでbashを抜けるか、新規ウィンドウを開いて、作業ディレクトリに移動し以下のコマンドを叩きます。

docker-compose up

色々と文字が出て最後が以下の出力が出るはずです。

 Use Ctrl-C to stop

ブラウザからlocalhost:3000にアクセスします。
以下のページが表示されれば成功です。

スクリーンショット 2020-07-05 2.21.09.png

bootstrapの導入

続いてbootstrapの導入です。
まず、/app/javascript/packs/application.jsに以下を追記します。

application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//以下の2行
import 'bootstrap';
import '../stylesheets/application.scss';

続いて/app/javascript以下にstylesheetsディレクトリを作成し、さらにその中にapplication.scssを作成します。
パスは/app/javascript/stylesheets/application.scssとなります。

次に今作成したapplication.scssに以下を書きます。

application.scss
@import '~bootstrap/scss/bootstrap';

続いて再度Dockerのbashに入ります。

docker-compose run --rm web bash

bashに入りましたら、以下のコマンドを叩きます。

yarn add jquery bootstrap popper.js

処理が完了しましたら、exitでbashを抜けて、先ほど立ち上げたサーバーをC-cで停止します。
サーバーが止まりましたら、一度docker-compose downします。

docker-compose down

続いてDockerのbashに入ります。

docker-compose run --rm web bash

bashに入りましたら、次のコマンドを実行します。

yarn install --check-files

ここまでできましたら、作業完了です。

確認

bootstrapが入っているか確認する際には、以下のテストコードをどこかしらのviewに貼り付けて、確認するのが良いかと思います。

test_view.html.erb
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

bootstrapが反映され、開発者ツールを開いた際にエラーが出ていなければ成功です。
スクリーンショット_2020-07-05_3_37_52.png

ここで、application.js:1 Uncaught Error: Cannot find module 'bootstrap'
とエラーがでた場合は再度、以下のコマンドを叩いて、再度確認してみてください。

yarn add jquery bootstrap popper.js

最後に

Railsを使うことが多いので、備忘録として残しました。
自分もDockerファイルなどの書き方について、よくわかっていない部分が多く、他の方の記事を大いに参考にしながら環境を作りました。ありがとうございます?‍♂️
Rails6では環境を作る際にwebpack,yarn関係でつまづくことが多いと思います。
至らない点など多いと思われますが、参考にしていただければ幸いです。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

DockerでCaddyを試す

はじめに

爆速! AWS EC2(Amazon Linux)環境でHTTPS環境を建てる方法 (Caddy)をみて面白そうだなって思った。試したいけど、環境構築は面倒だなってことで、Dockerで試しに動かしてみることにした。

試しに動かしてみる

# ポートは片方だけでも動きます
$ docker run --rm -it -p 80:80 -p 443:443 caddy

接続先は、http://localhostでした。

image.png

中身が見たい

$ docker run --rm -it -p 80:80 -p 443:443 caddy /bin/ash

設定ファイル

/etc/caddy内にCaddyfileがあります。

/etc/caddy/Caddyfile
# The Caddyfile is an easy way to configure your Caddy web server.
#
# Unless the file starts with a global options block, the first
# uncommented line is always the address of your site.
#
# To use your own domain name (with automatic HTTPS), first make
# sure your domain's A/AAAA DNS records are properly pointed to
# this machine's public IP, then replace the line below with your
# domain name.
:80

# Set this path to your site's directory.
root * /usr/share/caddy

# Enable the static file server.
file_server

# Another common task is to set up a reverse proxy:
# reverse_proxy localhost:8080

# Or serve a PHP site through php-fpm:
# php_fastcgi localhost:9000

# Refer to the Caddy docs for more information:
# https://caddyserver.com/docs/caddyfile

おわりに

Dockerfileとかを試したい場合は、以下が参考になると思います。

caddy
Go製WebサーバーCaddy触ってみた

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む