DEV Community: VA-11 Hall-A:東方算術騎士団【令和版】

[WIP] メモです

VA-11 Hall-A:東方算術騎士団【令和版】 — Mon, 20 Jan 2020 01:16:08 +0000

dotnetcore Docker visual studio Wiki

[WIP]
Visual Studio Tools for Docker

https://techinfoofmicrosofttech.osscons.jp/index.php?Visual%20Studio%20Tools%20for%20Docker#ea137492

Docker-compose Elixir Phoenix && Elm && Nginx && Redis Development environment

VA-11 Hall-A:東方算術騎士団【令和版】 — Tue, 14 Jan 2020 13:17:28 +0000

Docker Phoenix 開発環境構築

バックエンドはElixir Phoenix
フロントエンドはElm
WebサーバはNginxで生成されます。

ものすごくざっくり説明なのでご容赦を

Git Clone

ProbremaResolt Github
https://github.com/ProblemaResolt/Problema

git clone https://github.com/ProblemaResolt/Problema

Docker Build

docker-compose -f "docker-compose.yml" up -d --build

Phoenix 構築

内部に入る
docker-compose exec api sh

Phoenix 立ち上げ

option などは公式を参考にしてください。

https://hexdocs.pm/phoenix/Mix.Tasks.Phx.New.html#content

mix phx.new . --no-html --no-brunch

Local は以下のフォルダが生成されます。

/web/

色々聞かれるのですが基本Yesで大丈夫です。

ライブラリインストール

mix deps.get

dapter の{:plug_cowboy, "~> 1.0"},を追加　

config/mix.exs内へ追加

[中略]
  defp deps do
    [
      ~
      {:plug_cowboy, "~> 1.0"},　#追加
      ~
    ]
  end

[中略]

DevDB 接続

\config\dev.exs の書き換え

[中略]
config :web, Web.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "postgres",
  password: "postgres",
  database: "api_dev",
  hostname: "db",
  pool_size: 10
[中略]

DB Migrate

DB情報を更新

mix ecto.create

Phoenix 起動

Phoenix server を起動します。
mix phx.server

※ docker-compose.yml command に仕込んでおけば dockr-compose up -d の際に起動してくれるようになります。

Env 設定

ちょっとまって...

Elm 構築

docker-compose exec assets sh

elm project 作成します　聞かれたらYで応答してあげてください。

/opt/app/assets #　elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.1/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]: y
Okay, I created it. Now read that link!

/opt/app/assets # elm reactor
Go to <http://localhost:8000> to see your project dashboard.

するとブラウザに表示されます！

/assets/src に elm file を作成して設置すると表示してくれます。

とりあえずここまで

参考資料

API

Phoenix 公式
https://hexdocs.pm/phoenix/
- Phoenix入門（第14章 Mix Tasks その１） https://www.tech-note.info/entry/phoenix-14-mix-tasks-1
- ElixirでSI開発入門 #4 本番パスワードを環境変数に持たせる https://qiita.com/tuchiro/items/4ccba7e210c596c383af#%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B
- Redis関連参考 PhoenixでRedisを使った簡単ランキングの実装 https://qiita.com/koyo-miyamura/items/b5c123fa40685b9f8073#ランキングロジックを作る

Assets

Elm 公式 https://guide.elm-lang.jp/

Docker 関連

docker-compose コマンド概要
http://docs.docker.jp/compose/reference/overview.html
コマンド一覧（Docker Compose編）
https://www.wakuwakubank.com/posts/354-docker-command-compose/
Compose ファイル・リファレンス
http://docs.docker.jp/compose/compose-file.html

Docker-Compose＆typescript-react-sass-webpack-babel-boilerplate

VA-11 Hall-A:東方算術騎士団【令和版】 — Tue, 17 Dec 2019 02:44:44 +0000

GitHub

https://github.com/ProblemaResolt/DockerFrontendReact

Docker

Docker
docker-compose

typescript-react-sass-webpack-babel-boilerplate

This is a basic boilerplate for these technologies:

TypeScript
React
SASS
Webpack
Babel

Setup dev environment

docker-compose build
docker-compose up -d
docker-compose exec frontend ash
yarn install
develop yarn run webpack:dev
open http://localhost:8000/

Production

production yarn run webpack:prod

Reference Material

typescript-react-sass-webpack-babel-boilerplate

link:[https://github.com/maxbause/typescript-react-sass-webpack-babel-boilerplate]

Webpackの設定は変えていますが、ドイツの　max さんのやつ参考（ほぼ）にしましたありがとう！！！！

MaxBauseさんのサイト

https://maxbause.me

mix ecto.migrate で重複エラーが起きた時のメモ

VA-11 Hall-A:東方算術騎士団【令和版】 — Thu, 07 Nov 2019 07:46:06 +0000

すいませんものすごく個人的なメモです。

問題

mix ecto.migrateを行った際以下のようなエラーが発生

$ mix ecto.migrate
warning: found quoted keyword "test" but the quotes are not required. Note that keywords are always atoms, even when quoted. Similar to atoms, keywords made exclusively of Unicode letters, numbers, underscore, and @ do not require quotes 
  mix.exs:56

** (Ecto.MigrationError) migrations can't be executed, migration name create_articles is duplicated
    (ecto) lib/ecto/migrator.ex:275: Ecto.Migrator.ensure_no_duplication/1
    (ecto) lib/ecto/migrator.ex:256: Ecto.Migrator.migrate/4
    (ecto) lib/mix/tasks/ecto.migrate.ex:83: anonymous fn/4 in Mix.Tasks.Ecto.Migrate.run/2
    (elixir) lib/enum.ex:783: Enum."-each/2-lists^foreach/1-0-"/2
    (elixir) lib/enum.ex:783: Enum.each/2
    (mix) lib/mix/task.ex:331: Mix.Task.run_task/3
    (mix) lib/mix/cli.ex:79: Mix.CLI.run_task/2
    (elixir) lib/code.ex:813: Code.require_file/2

英文ではcreate_articles名が重複しとるぞと

解決法（とりあえず解決法を知りたい人に）

テーブル名が同じ名前のためエラーが出たのこと、
以下のコマンドで通ります。
mix ecto.migrate --step 1

原因

どうやら migrate する際にテーブル名が重複していたようでmigrationを一つに実行すると通るというわけですね。

You can fix it by running 1 migration at a time

mix ecto.migrate --step 1 こちらのコマンドをうつと

$ mix ecto.migrate --step 1
warning: found quoted keyword "test" but the quotes are not required. Note that keywords are always atoms, even when quoted. Similar to atoms, keywords made exclusively of Unicode letters, numbers, underscore, and @ do not require quotes 
  mix.exs:56

[info] == Running App.Repo.Migrations.CreateArticles.change/0 forward
[info] create table articles
[info] == Migrated in 0.1s

やったぜ実行できました！

Ideally you should not have 2 migrations with the same name :)

以下の記事でもあるようにテーブル名は同じ名前じゃだめだよーとのこと
むむーどこで作成しちまっていたのか...
メモでした。

参考リンク

How to fix Ecto duplicate name migrations error
http://disq.us/t/2jnipyj
ありがとう　https://github.com/minhajuddin　さん

そのほか日本語での mix tasks を解説してくださっている記事です。
Phoenix入門（第14章 Mix Tasks その２） - 技術メモ
https://www.tech-note.info/entry/phoenix-14-mix-tasks-2#mix-ectogenmigration
ありがたいありがたい

mix tasks は一通り覚えようと思いました...

Pleroma official-docker-support

VA-11 Hall-A:東方算術騎士団【令和版】 — Mon, 05 Aug 2019 06:07:38 +0000

Merge branch 'official-docker-support' into 'develop'

https://git.pleroma.social/pleroma/pleroma/commit/ba72d02f86d229ae83d4ca669e548b9968bdf8dd

詳細は帰宅後
実際にやってみる。

Windows10でDockerで起動したPhoenixとMySQLと開発環境となやみ

VA-11 Hall-A:東方算術騎士団【令和版】 — Fri, 02 Aug 2019 08:53:06 +0000

caution！！！

この記事は重大なミスを犯しています。
コード書き換えが済んでおらず、今一度時間をつくって作り直します。

Windows１０でdockerとElmとPhoenix

フロントエンドをelm バックエンドのAPIをElixir
データベースをMysqlとして起動したいというなんか自分でやってみた感のあるものです。
これいっぱつで環境できまっせみたいなのが出来ないかなぁと試行錯誤しております。

課題として

ShellScriptでまとめたい
Elm は別にコンテナなのはとっ散らかるけどこれでいいの？
セキュリティ的に怖いので .env のようなファイルが必要か

何か良い方法あったら教えてくださるとありがたいです。

docker compose ファイル

MySQL8.0以降はまだ対応していない？そのため5.7にしています。

mariaex error #222

https://github.com/xerions/mariaex/issues/222

version: '3'
services:
  db:
    image: mysql:5.7
    container_name: "dev_db"
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/volumes:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: 'password'      
  api:
    build: ./
    container_name: "api_app"
    working_dir: /opt/app
    command: mix phx.server
    volumes:
      - .:/opt/app
    environment:
      MYSQL_ROOT_USERNAME: 'root'
      MYSQL_ROOT_PASSWORD: 'password'
      MYSQL_HOSTNAME: 'db'
      MYSQL_PORT: '3306'
    ports:
      - '4000:4000'
    depends_on:
      - db
  web:
    build: ./
    container_name: "web_app"
    ports:
      - "8000:8000"
    volumes:
      - ./web/volumes:/opt/app/web
    tty: true

Dockerのビルド

バックグラウンドのAPIを作成するため、Phoenixを立ち上げます。

docker-compose build api

MySQLコンテナ起動

DBを起動させます
-dを入れてバックグランドで動かします。

docker-compose up -d db

PhoenixProject作成

デフォルトはpostgreSQLであるためここではMySQLで起動します。
（特に理由はないですがポスグレの場合はDocker-Compose.ymlをポスグレに修正してください）

docker-compose run --rm api mix phx.new . --database mysql --no-html

ライブラリ追加

dapter の{:plug_cowboy, "~> 1.0"},を追加　

config/mix.exs内へ追加

[中略]
  defp deps do
    [
      {:phoenix, "~> 1.3.4"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_ecto, "~> 3.2"},
      {:mariaex, ">= 0.0.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:plug_cowboy, "~> 1.0"},　#ココ
      {:cowboy, "~> 1.0"}
    ]
  end

[中略]

ライブラリインストール

Elixirライブラリをインストールします。

docker-compose run --rm api mix deps.get

開発環境のDB接続準備

\config\dev.exs の書き換え

[中略]
# Configure your database
config :app, App.Repo,
  adapter: Ecto.Adapters.MySQL,
  username: "root",
  password: "password",
  database: "app_dev",
  hostname: "db",
  pool_size: 10
[中略]

DB Migrate

DB情報を更新

docker-compose run --rm api mix ecto.create

起動する。

アプリを起動します。

docker-compose up -d

http://localhost:4000 でPhoenixの画面が
Welcome to Phoenix!
A productive web framework that
does not compromise speed and maintainability.

出ればOKです。

Elixirバージョン確認

docker-compose run --rm app elixir -v

Phoenix バージョン確認

docker-compose run --rm app mix phx.new --version

Dockerコンテナ内へ入る場合

注意：一応docker ps などで確認してくんさい
docker-compose ファイルで設定したcontainer_name: "web_app"を指定していますので container name でDocker内に入ります。

docker exec -it web_app //bin/sh

これでDockerのコンテナ内に入れました。

elm の設定

cd web/
にてElm用のディレクトリに移動します。

/opt/app/ #  cd web/

/opt/app/web # elm reactor
すると
Go to http://localhost:8000 to see your project dashboard.
ダッシュボードが http://localhost:8000 に表示されます。

作業終了時

docker-compose down

これでElmとElixir Phoenix の環境ができました。
Linuxなどでファイル編集をする際の権限などまだまだ課題もあり
そのあたり皆さんどうされているのでしょうか。

参考にしたページ

Docker の設定

Elixir/Phoenix+MySQL5.7環境をDocker/Docker Composeで整え開発する。 https://qiita.com/studio23c/items/510a12abd53f3651b5b2
Elixir1.6 / Phoenix1.3の環境をDockerで整えてCRUDアプリを動かすまで https://qiita.com/dd511805/items/13f3ea4255dc4d1a3fbb ## Elixir Phoenix Phoenix 公式 https://hexdocs.pm/phoenix/overview.html

elm

Create Elm App https://github.com/halfzebra/create-elm-app#getting-started
Elmで非同期Http通信を含んだSPAを試してみる https://qiita.com/sand/items/849c919b0d957ee99b9d
elm 0.19 で JSONを使ってjsと通信したメモ https://qiita.com/hibohiboo/items/33a8dcf462bd8e4a55e0
elm-lang examples https://elm-lang.org/examples

ElmElixir memo

VA-11 Hall-A:東方算術騎士団【令和版】 — Wed, 31 Jul 2019 17:08:01 +0000

技術メモ

これを参考にPhoenixAPIを作成します。後日更新予定

API通信を伴うThe Elm Architecture を流れをサクっと体験する https://t.co/SL5JmJntwj #Qiita
— VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) July 31, 2019

ElmでJSON APIを叩く最低限 https://t.co/AIAhSQrZhk #Qiita
— VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) July 31, 2019

Building a RESTful API Backend with Authentication using Elixir Phoenix by @pamitmo https://t.co/rufX7sNLFJ
— VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) July 31, 2019

Elixir + Phoenix でお手軽にJSONを返すWebAPIを構築 - にわとりプログラマーの備忘録 https://t.co/QvzgZcGAN3
— VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) July 31, 2019

Elixir+PhoenixでAPIをつくってReactから使ってみる https://t.co/A6SO3wakc4 #Qiita
— VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) July 31, 2019

C＃言語APIメモ

VA-11 Hall-A:東方算術騎士団【令和版】 — Mon, 29 Jul 2019 02:13:05 +0000

JavaScriptとWeb APIでデータベース処理を行うWebアプリを作成する【2019年版】 - GrapeCity.devlog https://devlog.grapecity.co.jp/entry/2019/01/17/wijmo-flexgrid-webapi

一週間で身につくC＃言語の基本 http://csharp.sevendays-study.com/

一週間で身につくMySQL http://web.sevendays-study.com/mysql/

Windows10のWSLでDockerとDockerComposeを動かすところまでメモ

VA-11 Hall-A:東方算術騎士団【令和版】 — Tue, 23 Jul 2019 05:50:47 +0000

Windows 10 HomeでWSL越しにDocker for Ubuntu+Re:VIEWを使う（VM不要） https://t.co/xVObi8SHlh #Qiita
— VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) July 23, 2019

残念ながら上記では動かず（2019/07/20）

Dockerまでは動くがそれ以降のDocker-Compose下記のエラーで動かない

# sudo docker-compose up
Creating network "etl_default" with the default driver
ERROR: Failed to Setup IP tables: Unable to enable NAT rule:  (iptables failed: iptables --wait -t nat -I POSTROUTING -s {ip}/16 ! -o br-e9ec09beb9a3 -j MASQUERADE: iptables: No chain/target/match by that name.
 (exit status 1))

エラー文でぐぐってみると
dockerは動く、しかしネットワーク回りがダメってことらしいこれ解消できるのだろうけれどその道のプロでもないしなぁ…

参考：

dockerをWindows10 HomeのWSL (Windows Subsystem for Linux)で動かしてみた https://www.scriptlife.jp/contents/programming/2018/07/09/docker-on-wsl/

WSLで「普通」にDockerが動くようになっていた話(しかしdocker-composeは動かない) - 無気力生活 (ノ ´ω｀)ノ ~゜ https://gdgd-shinoyu.hatenablog.com/entry/2018/07/10/032023

WindowsとDockerは食い合わせが悪い https://qiita.com/Hibikine_Kage/items/4b5c0f5f72e4d03b4797 #Qiita

WSL2の記事もあったので帰ったらためしてみまする。

wsl2でdocker-composeの風を感じてみる - 無気力生活 (ノ ´ω｀)ノ ~゜ https://gdgd-shinoyu.hatenablog.com/entry/2019/07/25/024013

はろーわーるど

VA-11 Hall-A:東方算術騎士団【令和版】 — Thu, 27 Jun 2019 09:28:40 +0000

はろーわーるど