Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 90 Anzeige

Weitere Verwandte Inhalte

Ähnlich wie 20230128.pptx (20)

Aktuellste (20)

Anzeige

20230128.pptx

  1. 1. Linuxのお話とdockerでの環境構築
  2. 2. Linuxの特徴 LinuxとはOSの一種 いいところ - 物によっては無料で使えるのでライセンス料金を節約できる - 起動が早い(余分なものが入っていないので) - 機体の種類を問わない - オープンソースなので誰でも開発できる 悪いところ - エンジニアじゃないと難しい(エンジニアでも難しい) - 日本語が充実しているとは言えない つまり - エンジニアにはデメリットなし!!!
  3. 3. Linuxの種類 RedHat系 CentOS Fedora Rocky Linux Debian系 Debian Ubuntu Linux mint Slackware系 Slackware ※ 赤字はメジャーなOS
  4. 4. 現在の主流 ちょっと前まで RedHat:CentOS Debian:Ubuntu これから先 RedHat:Rocky Linux Debian:Ubuntu 実は。。。 RedHat系のCentOSが2024年6月30日でサポートが終了になります。 そのため今までCentOSを使っているシステムは同じ RedHatベースのRocky LinuxかUbuntu等の別系統のOSに 載せ替える必要があります。
  5. 5. ここからハンズオン アジェンダ - サーバ構築体験 with docker (コマンド編) - サーバ構築体験 with docker (コード編) - サーバ構築体験 with docker (image編)
  6. 6. 今回の構成 リバースプロキシ - Nginx アプリケーション(API) - Ruby On Rails(6.1.5) - ruby(3.0.5) アプリケーション(Front) - vue-cli データベース - MySql(8.0.23) 上記4つのコンテナを作成していきます。
  7. 7. 事前準備 適当な場所に「docker-workshop」ディレクトリを作成してください
  8. 8. ホストのhostsファイルに設定を追加 ・Macの場合 sudo vi /etc/hosts 127.0.0.1 workshop-local.jpを追加 ・Windows C:¥windows¥system32¥drivers¥etc¥hosts (管理者権限) 127.0.0.1 workshop-local.jpを追加
  9. 9. コマンド編 作成したdocker-workshopディレクトリに「command」というディレクトリを作 成してください。 commandディレクトリ直下「api」ディレクトリと「front」ディレクトリを作成 してください。 「api」ディレクトリと「front」ディレクトリの直下に「docker-compose.yml」 を作成
  10. 10. frontのdocker-compose.yml スピーカーノートに書いてあるのでコピペしてください ※M1使ってる人は`tty:ture`の下の行に以下を追加 platform: linux/x86_64
  11. 11. frontのdockerディレクトリ command/frontディレクトリに「docker」ディレクトリを作成 「docker」ディレクトリ直下に「vue」ディレクトリを作成 「vue」ディレクトリ直下にdockerfileを作成 dockerfileの中身はスピーカーノートに書いてあるのでコピペして使ってください
  12. 12. コンテナを立ち上げる ・docker-compose up -d
  13. 13. vueコンテナの初期設定 ・docker-compose exec vue bash ・ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime ・apt update ・apt install tzdata curl git vim build-essential libz-dev
  14. 14. vueコンテナにnode.jsとvue-cliをインストール ・curl -LO https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.xz ・tar xvf node-v18.13.0-linux-x64.tar.xz ・mv node-v18.13.0-linux-x64 /opt/node ・export PATH=$PATH:/opt/node/bin ・npm install -g yarn ・yarn global add @vue/cli
  15. 15. vueプロジェクトを作成 ・cd /var/www/src ・vue create . ・選択内容はスピーカーノート参照
  16. 16. vueプロジェクトにproxyと通信する設定を追加 ・vue.config.jsの内容をスピーカーノートの内容に変更 ・yarn serve
  17. 17. APIと通信するコードを追加 ・command/front/src/src/views/AboutView.vueを編集 ・内容はスピーカーノートを参照
  18. 18. apiのdocker-compose.yml スピーカーノートに書いてあるのでコピペしてください ※M1使ってる人は`tty:ture`の下の行に以下を追加 platform: linux/x86_64
  19. 19. apiのdockerディレクトリ command/apiディレクトリに「docker」ディレクトリを作成 「docker」ディレクトリ直下に「rails」、「nginx」ディレクトリを作成 「rails」、「nginx」ディレクトリ直下にdockerfileを作成 dockerfileの中身はスピーカーノートに書いてあるのでコピペして使ってください
  20. 20. コンテナを立ち上げる ・docker-compose up -d
  21. 21. railsコンテナにRailsプロジェクトを作成 ① ・docker-compose exec rails bash ・ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime ・apt update ・apt install tzdata curl git vim build-essential libz-dev ・curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash ・echo 'eval "$(~/.rbenv/bin/rbenv init - bash)"' >> ~/.bashrc ・source ~/.bashrc ・rbenv -v
  22. 22. railsコンテナにRailsプロジェクトを作成 ② ・rbenv install 3.0.5
  23. 23. TIPS:1 TTY Dockerはプロセスを仮想化するため、プロセスが完了するとコンテナは終了して しまいます。 今回もttyを設定しないと、プロセスを指定していないのでコンテナは立ち上がっ てすぐに終了してしまいます。 ttyを設定すると仮想的な標準入出力を受け待ちするデバイスを追加します。 このデバイスを追加することでプロセスが完了することを防ぐので、コンテナを 継続させることができます。
  24. 24. TIPS:2 context docker-compose.ymlには必ずcontextを設定しましょう。 contextはbuildを実行する際のカレントディレクトリを指定するために利用します。 設定しない場合は、各dockerfileのディレクトリがカレントディレクトリになりま す。 複数のコンテナで同じファイルを共有する際に、contextを設定しておくことでア クセスパスがシンプルになります。
  25. 25. TIPS:3 volumes volumesは二つの使い方があります。 ①ホストとコンテナでファイルを共有する。ホストでファイルを編集しても、コ ンテナでファイルを編集しても相互に反映されます。ソースコードをコンテナに 配置するときになどに利用します。 ②Dockreがもつローカルのストレージにデータを保存する。DBのデータ永続化 等で利用します。ファイル構成として保持する必要はないがローカルには保持し ておかなくてはいけないデータを保持するときに利用します。
  26. 26. TIPS:4 ports ホストとコンテナで通信をするポートを取り決める際に使用します。 今回の例ではホストの80番ポートにきた通信をコンテナの80番ポートに転送する ために利用しています。 コンテナ間の通信のみの場合は指定しなくても大丈夫です。
  27. 27. railsコンテナにRailsプロジェクトを作成 ③ ・rbenv global 3.0.5 ・ruby -v ・gem install rails -v 6.1.5 ・rails -v
  28. 28. railsコンテナにRailsプロジェクトを作成 ④ ・cd /opt ・curl -LO https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.xz ・tar xvf node-v18.13.0-linux-x64.tar.xz ・mv node-v18.13.0-linux-x64 node ・export PATH=$PATH:/opt/node/bin ・node -v
  29. 29. railsコンテナにRailsプロジェクトを作成 ⑤ ・npm install -g yarn ・yarn -v ・cd /var/www/src ・rails new . --api
  30. 30. コントローラーを作成 ・bin/rails g controller api/v1/samples index ・内容はスピーカーノートを参照
  31. 31. RailsのConfigファイルを編集 ・config/application.rbのApplicationクラス内に以下を追加 config.hosts << "workshop-local.jp" ・bin/rails s -b 0.0.0.0
  32. 32. NginxコンテナにNginxをインストール ・docker-compose exec nginx bash ・ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime ・apt update ・apt install tzdata nginx vim ・nginx -v ・設定ファイルを作成(スピーカーノート参照) ・nginx -t ・nginx ・ps aux ・ブラウザでhttp://localhostを表示
  33. 33. アプリケーション用の設定ファイルを作成 ・設定ファイルを作成(スピーカーノート参照) ・nginx -t ・nginx -s reload
  34. 34. コンテナが正しく作成できているか確認 ・ブラウザでhttp://workshop-local.jpを表示 ・ブラウザでhttp://workshop-local.jp/aboutを表示
  35. 35. 後片付け ・exit ・docker-compose down --rmi all
  36. 36. コード編 ・作成したdocker-workshopディレクトリに「code」というディレクトリを作成 してください。 ・codeディレクトリ直下「api」ディレクトリと「front」ディレクトリを作成し てください。 「api」ディレクトリと「front」ディレクトリの直下にcommandディレクトリで 作成した「docker-compose.yml」をコピー
  37. 37. frontのdockerディレクトリ code/frontディレクトリに「docker」ディレクトリを作成 「docker」ディレクトリ直下に「vue」ディレクトリを作成 「vue」ディレクトリ直下にdockerfileを作成 dockerfileの中身はスピーカーノートに書いてあるのでコピペして使ってください
  38. 38. frontのコンテナを作成 ・docker-compose build ・docker-compose up -d
  39. 39. vueプロジェクトを作成 ・docker-compose ps ・docker-compose exec vue bash ・pwd ・vue create . ・選択内容はスピーカーノート参照
  40. 40. vueプロジェクトにproxyと通信する設定を追加 ・vue.config.jsの内容をスピーカーノートの内容に変更 ・yarn serve
  41. 41. APIと通信するコードを追加 ・code/front/src/src/views/AboutView.vueを編集 ・内容はスピーカーノートを参照
  42. 42. vueのDockerfileを編集 ・dockerfileの末尾に以下を追加 CMD ["yarn", "serve"] ・docker-compose.ymlのtty:trueを削除
  43. 43. vueコンテナを再作成 ・exit ・docker-compose build ・docker-compose up -d
  44. 44. apiのdockerディレクトリ code/apiディレクトリに「docker」ディレクトリを作成 「docker」ディレクトリ直下に「rails」、「nginx」ディレクトリを作成 「rails」、「nginx」ディレクトリ直下にdockerfileを作成
  45. 45. Railsコンテナのdockerfileを作成 ・api/docker/rails直下のdockerfileを編集 ・スピーカーノートの内容をコピーしてください。
  46. 46. Nginxコンテナのdockerfileを作成 ・api/docker/nginx直下のdockerfileを編集 ・スピーカーノートの内容をコピーしてください。 ・docker-compose.ymlのtty:trueを削除
  47. 47. Nginxの設定ファイルを作成(app.conf) api/docker/nginx直下にapp.confというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
  48. 48. Nginxの設定ファイルを作成(test.conf) api/docker/nginx直下にtest.confというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
  49. 49. apiのコンテナを作成 ・docker-compose build
  50. 50. dockerfileの命令について ・RUN:コンテナ内で実行するコマンド ・COPY:ローカルのファイルをコンテナにコピーする ・ADD:COPYと同様だが、圧縮ファイルは展開される。COPYの方が望ましい。 ・ENV:コンテナ内の環境変数を設定する ・ARG:dockerfile内で利用できる変数を定義できる ・ENTRYPOINT:コンテナ起動時に必ず実行されるコマンド ・CMD:ENTRYPOINTの引数
  51. 51. Nginxのdockerfileの解説 ・ENTRYPOINTを設定することで、コンテナ起動時にNginxをフォアグランドで 実行するようにしている。 ・ENTRYPOINTではただNginxを起動するコマンドになっている。 ・CMDでNginxをフォアグランドで実行するオプションを追加している。 ・フォアグランドでNginxのプロセスが動き続けるので、ttyがなくてもコンテナ の起動が継続される。
  52. 52. apiのコンテナを作成 ・docker-compose up -d
  53. 53. Railsのプロジェクトを作成 ・docker-compose exec rails bash ・pwd ・ruby -v ・node -v ・yarn -v ・rails -v ・rails new . --api
  54. 54. コントローラーを作成 ・bin/rails g controller api/v1/samples index ・内容はスピーカーノートを参照
  55. 55. RailsのConfigファイルを編集 ・config/environments/development.rbのApplicationクラス内に以下を追加 config.hosts << "workshop-local.jp"
  56. 56. railsのDockerfileを編集 ・dockerfileの末尾に以下を追加 COPY ./src/Gemfile /var/www/src COPY ./src/Gemfile.lock /var/www/src RUN bundle install CMD rm -f tmp/pids/server.pid && bundle install && bin/rails s -b 0.0.0.0 ・dockerfileの以下を削除 gem install rails -v 6.1.5
  57. 57. apiのdocker-compose.ymlを修正 ・docker-compose.ymlのtty:trueを削除
  58. 58. apiのコンテナを再作成 ・docker-compose build ・docker-compose up -d
  59. 59. コンテナが正しく作成できているか確認 ・ブラウザでhttp://loclhostを表示 ・ブラウザでhttp://workshop-local.jpを表示 ・ブラウザでhttp://workshop-local.jp/aboutを表示
  60. 60. 後片付け ・docker-compose down –rmi all
  61. 61. Railsのdockerfileの解説 ・初回のコンテナ起動時はRailsのプロジェクトがなかったので、CMDを指定して も対象がないので失敗してしまう。 ・プロジェクトの雛形を作成したので、コンテナの中に入ってRails sとを実行す るよりはコンテナ作成完了時に自動で実行した方が楽なので、CMDを追加 ・server.pidを削除するのは、正常終了ができずゾンビプロセスになった場合を考 慮して起動する前にクリーンな状態にするため。
  62. 62. イメージ編 ・作成したdocker-workshopディレクトリに「image」というディレクトリを作成 してください。 ・imageディレクトリ直下「api」ディレクトリと「front」ディレクトリを作成し てください。 「api」ディレクトリと「front」ディレクトリの直下にcommandディレクトリで 作成した「docker-compose.yml」をコピー
  63. 63. frontのdockerディレクトリ image/frontディレクトリに「docker」ディレクトリを作成 「docker」ディレクトリ直下に「vue」ディレクトリを作成 「vue」ディレクトリ直下にdockerfileを作成 dockerfileの中身はスピーカーノートに書いてあるのでコピペして使ってください
  64. 64. frontのコンテナを作成 ・docker-compose build ・docker-compose up -d ・docker-compose exec vue bash
  65. 65. vueプロジェクトを作成 ・vue create . ・選択内容はスピーカーノート参照
  66. 66. vueプロジェクトにproxyと通信する設定を追加 ・vue.config.jsの内容をスピーカーノートの内容に変更
  67. 67. APIと通信するコードを追加 ・code/front/src/src/views/AboutView.vueを編集 ・内容はスピーカーノートを参照
  68. 68. vueのdockerfileを編集 ・コンテナを起動時にvueプロジェクトが起動するようにする ・dockerfileの末尾に以下を追加 CMD [“yarn”, “serve”] ・docker-compose.ymlからtty: trueを削除
  69. 69. apiのdockerディレクトリ image/apiディレクトリに「docker」ディレクトリを作成 「docker」ディレクトリ直下に「rails」、「nginx」、「mysql」ディレクトリを 作成 「rails」、「nginx」、「mysql」ディレクトリ直下にdockerfileを作成
  70. 70. apiのdocker-compose.ymlを編集 ・スピーカーノートの内容をコピーしてください。
  71. 71. Railsコンテナのdockerfileを作成 ・api/docker/rails直下のdockerfileを編集 ・スピーカーノートの内容をコピーしてください。
  72. 72. Nginxコンテナのdockerfileを作成 ・api/docker/nginx直下のdockerfileを編集 ・スピーカーノートの内容をコピーしてください。
  73. 73. Nginxの設定ファイルを作成(app.conf) api/docker/nginx直下にapp.confというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
  74. 74. Nginxの設定ファイルを作成(test.conf) api/docker/nginx直下にtest.confというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
  75. 75. Mysqlのdockerfileを作成 ・api/docker/mysql直下のdockerfileを編集 ・スピーカーノートの内容をコピーしてください。
  76. 76. Mysqlの設定ファイルを作成 api/docker/mysql直下にmy.cnfというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
  77. 77. apiのコンテナを作成 ・docker-compose build ・docker-compose up -d
  78. 78. Railsのプロジェクトを作成 ・docker-compose exec rails bash ・pwd ・ruby -v ・node -v ・yarn -v ・rails -v ・rails new . --api
  79. 79. コントローラーを作成 ・bin/rails g controller api/v1/samples index ・内容はスピーカーノートを参照
  80. 80. RailsのConfigファイルを編集 ・config/environments/development.rbのApplicationクラス内に以下を追加 config.hosts << "workshop-local.jp"
  81. 81. RailsのGemファイルを編集 ・image/api/src/Gemfileの末尾に以下を追加 gem "mysql2" ・bundle install
  82. 82. Railsにデータベースの設定を追加 ・image/api/src/config/database.yml ・内容はスピーカーノートを参照してください ・bin/rails db:create ・bin/rails db:migrate:status
  83. 83. Dockerfileを編集 ・dockerfileの末尾に以下を追加 COPY ./src/Gemfile /var/www/src COPY ./src/Gemfile.lock /var/www/src RUN bundle install CMD rm -f tmp/pids/server.pid && bundle install && bin/rails s -b 0.0.0.0 ・dockerfileの以下を削除 gem install rails -v 6.1.5
  84. 84. apiのdocker-compose.ymlを修正 ・docker-compose.ymlのtty:trueを削除
  85. 85. apiのコンテナを作成 ・docker-compose build ・docker-compose up -d
  86. 86. コンテナが正しく作成できているか確認 ・ブラウザでhttp://loclhostを表示 ・ブラウザでhttp://workshop-local.jpを表示 ・ブラウザでhttp://workshop-local.jp/aboutを表示
  87. 87. ENTRYPOINTではなくCMDの理由 ・イメージにすでにENTRYPOINTが指定されていて、そのENTRYPOINTの処理の 中でCMDとして送られたコマンドが実行されるようになっている。 上記の理由からENTRYPOINTは指定せずにCMDを利用する。 ただし、コンテナが初回起動か等の細かい制御をしたい場合は、ENTRYPOINTを 利用し、シェルファイルを起動の起点とする場合がある。
  88. 88. 片付け ・docker-compose down –rmi all -v ・Macの場合 sudo vi /etc/hosts 127.0.0.1 workshop-local.jpを削除 ・Windows C:¥windows¥system32¥drivers¥etc¥hosts (管理者権限) 127.0.0.1 workshop-local.jpを削除
  89. 89. 以上です。 ありがとうございました!

Hinweis der Redaktion

  • Linuxと一言で言っても色々な種類があります。
    基本的には開発会社がリリースしているものをベースとしてそれぞれが加工しているので、開発元での系統分けがされます。
    この系統の違いにより、インストールしたライブラリのディレクトリ構造が違ったり、使えるコマンドが違ったりなど様々な違いがあるので、自分が使っているOSは何なのかは確認するようにしましょう。
  • まずはコマンド編で、実際にOSしか入っていないところから環境構築をすることでサーバ構築の擬似体験をしてもらうかと思います。
    コード編ではIacを取り入れて構築をしてみましょう。
    最後にDockerまじ便利って言われる理由を体験してもらいたいです。
  • version: '3.8'
    services:
    vue:
    build:
    context: .
    dockerfile: ./docker/vue/dockerfile
    volumes:
    - ./src:/var/www/src
    tty: true
    logging:
    driver: json-file
    options:
    max-file: '1'
    max-size: 3m
    networks:
    default:
    name: workshop-local
  • FROM ubuntu:20.04
  • ・Generate project in current directory? => y
    ・Please pick a preset: => Manually select features
    ・Check the features needed for your project: => Babel, Router, Linter / Formatter
    ・Choose a version of Vue.js that you want to start the project with => 3.x
    ・Use history mode for router? => y
    ・Pick a linter / formatter config: => ESLint with error prevention only
    ・Pick additional lint features: => Lint on save
    ・Where do you prefer placing config for Babel, ESLint, etc.? => In dedicated config files
    ・Save this as a preset for future projects? => n
    ・Pick the package manager to use when installing dependencies: => Use Yarn
  • const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
    allowedHosts: 'all',
    webSocketServer: false
    },
    })
  • <template>
    <div class="about">
    <h1>This is an about page</h1>
    <h2>{{ text }}</h2>
    </div>
    </template>

    <script>
    export default {
    name: 'AboutView',
    data() {
    return {
    text: ''
    }
    },
    created() {
    console.log('create');
    fetch('/api/v1/samples/index')
    .then((res) => {
    return res.json()
    })
    .then((data) => {
    console.log(data);
    this.text = data.test
    })
    }
    }
    </script>
  • version: '3.8'
    services:
    nginx:
    build:
    context: .
    dockerfile: ./docker/nginx/dockerfile
    volumes:
    - ./src:/var/www/src
    ports:
    - 80:80
    tty: true
    logging:
    driver: json-file
    options:
    max-file: '1'
    max-size: 3m
    networks:
    - workshop-local
    depends_on:
    - rails
    rails:
    build:
    context: .
    dockerfile: ./docker/rails/dockerfile
    volumes:
    - ./src:/var/www/src
    tty: true
    logging:
    driver: json-file
    options:
    max-file: '1'
    max-size: 3m
    networks:
    - workshop-local
    networks:
    workshop-local:
    external: true
  • FROM ubuntu:20.04
  • npm install --no-bin-links -g yarn
  • class Api::V1::SamplesController < ApplicationController
    def index
    render json: {test: 'Railsから送信'}
    end
    end
  • cd /etc/nginx/conf.d
    vi test.conf

    server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    root /usr/share/nginx/html;
    }
  • cd /etc/nginx/conf.d
    vi app.conf

    server {
    listen 80;
    listen [::]:80;
    server_name workshop-local.jp;

    location / {
    proxy_pass http://vue:8080;
    proxy_set_header Host workshop-local.jp;
    proxy_redirect off;
    }

    location /api/ {
    proxy_pass http://rails:3000;
    proxy_set_header Host workshop-local.jp;
    proxy_redirect off;
    }
    }
  • FROM ubuntu:20.04
    ENV TZ=Asia/Tokyo
    RUN apt update
    RUN apt install -y tzdata
    RUN apt install -y curl git build-essential libz-dev
    RUN curl -LO https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.xz
    RUN tar xvf node-v18.13.0-linux-x64.tar.xz
    RUN mv node-v18.13.0-linux-x64 /opt/node
    ENV PATH /opt/node/bin:$PATH
    RUN npm install -g yarn
    RUN yarn global add @vue/cli
    RUN mkdir -p /var/www/src
    ARG workPath=/var/www/src
    WORKDIR ${workPath}

  • ・Generate project in current directory? => y
    ・Please pick a preset: => Manually select features
    ・Check the features needed for your project: => Babel, Router, Linter / Formatter
    ・Choose a version of Vue.js that you want to start the project with => 3.x
    ・Use history mode for router? => y
    ・Pick a linter / formatter config: => ESLint with error prevention only
    ・Pick additional lint features: => Lint on save
    ・Where do you prefer placing config for Babel, ESLint, etc.? => In dedicated config files
    ・Save this as a preset for future projects? => n
    ・Pick the package manager to use when installing dependencies: => Use Yarn

  • const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
    allowedHosts: 'all',
    webSocketServer: false
    },
    })
  • <template>
    <div class="about">
    <h1>This is an about page</h1>
    <h2>{{ text }}</h2>
    </div>
    </template>

    <script>
    export default {
    name: 'AboutView',
    data() {
    return {
    text: ''
    }
    },
    created() {
    console.log('create');
    fetch('/api/v1/samples/index')
    .then((res) => {
    return res.json()
    })
    .then((data) => {
    console.log(data);
    this.text = data.test
    })
    }
    }
    </script>
  • FROM ubuntu:20.04
    ENV TZ=Asia/Tokyo
    RUN apt update
    RUN apt install -y tzdata
    RUN apt install -y curl git vim build-essential libz-dev
    RUN git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
    ENV PATH /root/.rbenv/shims:/root/.rbenv/bin:/usr/local/sbin:$PATH
    RUN curl -LO https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.xz
    RUN tar xvf node-v18.13.0-linux-x64.tar.xz
    RUN mv node-v18.13.0-linux-x64 /root/node
    ENV PATH /root/node/bin:$PATH
    RUN curl -o- -L https://yarnpkg.com/install.sh | bash
    ENV PATH /root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:$PATH
    RUN git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
    RUN rbenv install 3.0.5
    RUN rbenv global 3.0.5
    RUN gem install rails -v 6.1.5
    RUN mkdir -p /var/www/src
    WORKDIR /var/www/src
  • FROM ubuntu:20.04
    ENV TZ=Asia/Tokyo
    RUN apt update
    RUN apt install -y tzdata
    RUN apt install -y nginx
    RUN apt install -y vim
    COPY docker/nginx/test.conf /etc/nginx/conf.d
    COPY docker/nginx/app.conf /etc/nginx/conf.d
    ENTRYPOINT /usr/sbin/nginx
    CMD "-g daemon off;"
  • app.conf

    server {
    listen 80;
    listen [::]:80;
    server_name workshop-local.jp;

    location / {
    proxy_pass http://vue:8080;
    proxy_set_header Host workshop-local.jp;
    proxy_redirect off;
    }

    location /api/ {
    proxy_pass http://rails:3000;
    proxy_set_header Host workshop-local.jp;
    proxy_redirect off;
    }
    }
  • server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    root /usr/share/nginx/html;
    }
  • class Api::V1::SamplesController < ApplicationController
    def index
    render json: {test: 'Railsから送信'}
    end
    end
  • FROM node:18.13.0
    ENV TZ=Asia/Tokyo
    RUN apt update
    RUN apt install -y tzdata
    RUN yarn global add @vue/cli
    ARG workPath=/var/www/src
    WORKDIR ${workPath}
  • ・Generate project in current directory? => y
    ・Please pick a preset: => Manually select features
    ・Check the features needed for your project: => Babel, Router, Linter / Formatter
    ・Choose a version of Vue.js that you want to start the project with => 3.x
    ・Use history mode for router? => y
    ・Pick a linter / formatter config: => ESLint with error prevention only
    ・Pick additional lint features: => Lint on save
    ・Where do you prefer placing config for Babel, ESLint, etc.? => In dedicated config files
    ・Save this as a preset for future projects? => n
    ・Pick the package manager to use when installing dependencies: => Use Yarn

  • const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
    allowedHosts: 'all',
    webSocketServer: false
    },
    })
  • <template>
    <div class="about">
    <h1>This is an about page</h1>
    <h2>{{ text }}</h2>
    </div>
    </template>

    <script>
    export default {
    name: 'AboutView',
    data() {
    return {
    text: ''
    }
    },
    created() {
    console.log('create');
    fetch('/api/v1/samples/index')
    .then((res) => {
    return res.json()
    })
    .then((data) => {
    console.log(data);
    this.text = data.test
    })
    }
    }
    </script>
  • version: '3.8'
    services:
    nginx:
    build:
    context: .
    dockerfile: ./docker/nginx/dockerfile
    ports:
    - 80:80
    networks:
    - workshop-local
    logging:
    driver: json-file
    options:
    max-file: '1'
    max-size: 3m
    rails:
    build:
    context: .
    dockerfile: ./docker/rails/dockerfile
    volumes:
    - ./src:/var/www/src
    tty: true
    networks:
    - workshop-local
    environment:
    MYSQL_USER: "root"
    MYSQL_PASSWORD: "password"
    logging:
    driver: json-file
    options:
    max-file: '1'
    max-size: 3m
    db:
    build:
    context: .
    dockerfile: ./docker/mysql/dockerfile
    ports:
    - 3306:3306
    # platform: linux/x86_64
    environment:
    MYSQL_ROOT_PASSWORD: "password"
    volumes:
    - workshop-db:/var/lib/mysql
    networks:
    - workshop-local
    logging:
    driver: json-file
    options:
    max-file: '1'
    max-size: 3m
    networks:
    workshop-local:
    external: true
    volumes:
    workshop-db:
  • FROM ruby:3.0.5
    ENV TZ=Asia/Tokyo
    RUN apt update
    RUN apt install -y tzdata curl
    RUN curl -LO https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.xz
    RUN tar xvf node-v18.13.0-linux-x64.tar.xz
    RUN mv node-v18.13.0-linux-x64 /opt/node
    ENV PATH /opt/node/bin:$PATH
    RUN npm install -g yarn
    RUN gem install rails -v 6.1.5
    ARG workPath=/var/www/src
    WORKDIR ${workPath}
  • FROM ubuntu:20.04
    ENV TZ=Asia/Tokyo
    RUN apt update
    RUN apt install -y tzdata
    RUN apt install -y nginx
    RUN apt install -y vim
    COPY docker/nginx/test.conf /etc/nginx/conf.d
    COPY docker/nginx/app.conf /etc/nginx/conf.d
    ENTRYPOINT ["/usr/sbin/nginx"]
    CMD ["-g", "daemon off;"]
  • app.conf

    server {
    listen 80;
    listen [::]:80;
    server_name workshop-local.jp;

    location / {
    proxy_pass http://vue:8080;
    proxy_set_header Host workshop-local.jp;
    proxy_redirect off;
    }

    location /api/ {
    proxy_pass http://rails:3000;
    proxy_set_header Host workshop-local.jp;
    proxy_redirect off;
    }
    }
  • server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    root /usr/share/nginx/html;
    }
  • FROM mysql:8.0.32
    ADD docker/mysql/my.cnf /etc/mysql/conf.d/my.cnf
    ENV TZ Asia/Tokyo
    CMD ["mysqld"]
  • [mysqld]
    character-set-server=utf8mb4
    collation-server = utf8mb4_bin

    # タイムゾーンの設定
    default-time-zone = SYSTEM
    log_timestamps = SYSTEM

    # デフォルト認証プラグインの設定
    default-authentication-plugin = mysql_native_password

    # エラーログの設定
    log-error = /var/log/mysql/mysql-error.log

    # スロークエリログの設定
    slow_query_log = 1
    slow_query_log_file = /var/log/mysql/mysql-slow.log
    long_query_time = 5.0
    log_queries_not_using_indexes = 0

    # 実行ログの設定
    general_log = 1
    general_log_file = /var/log/mysql/mysql-query.log

    [mysql]
    default-character-set=utf8mb4

    [client]
    default-character-set=utf8mb4
  • class Api::V1::SamplesController < ApplicationController
    def index
    render json: {test: 'Railsから送信'}
    end
    end
  • # SQLite. Versions 3.8.0 and up are supported.
    # gem install sqlite3
    #
    # Ensure the SQLite 3 gem is defined in your Gemfile
    # gem 'sqlite3'
    #
    default: &default
    adapter: mysql2
    encoding: utf8mb4
    pool: <%= ENV.fetch("RAILS_MAX_THREADS") {5} %>
    host: <%= ENV.fetch("DATABASE_HOSTNAME", "db") %>
    port: <%= ENV.fetch("DATABASE_PORT") {3306} %>

    development:
    <<: *default
    username: <%= ENV.fetch("MYSQL_USER", "root") %>
    password: <%= ENV.fetch("MYSQL_PASSWORD", "password") %>
    database: workshop_development

    # Warning: The database defined as "test" will be erased and
    # re-generated from your development database when you run "rake".
    # Do not set this db to the same as development or production.
    test:
    <<: *default
    username: <%= ENV.fetch("MYSQL_USER", "root") %>
    password: <%= ENV.fetch("MYSQL_PASSWORD", "password") %>
    database: workshop_test

    production:
    <<: *default
    database: db/production.sqlite3

×