Recommandé
Contenu connexe
Similaire à 20230128.pptx
Similaire à 20230128.pptx (20)
Dernier
Dernier (7)
20230128.pptx
- 2. Linuxの特徴 LinuxとはOSの一種 いいところ - 物によっては無料で使えるのでライセンス料金を節約できる - 起動が早い(余分なものが入っていないので) - 機体の種類を問わない - オープンソースなので誰でも開発できる 悪いところ - エンジニアじゃないと難しい(エンジニアでも難しい) - 日本語が充実しているとは言えない つまり - エンジニアにはデメリットなし！！！
- 3. Linuxの種類 RedHat系 CentOS Fedora Rocky Linux Debian系 Debian Ubuntu Linux mint Slackware系 Slackware ※ 赤字はメジャーなOS
- 5. ここからハンズオン アジェンダ - サーバ構築体験 with docker (コマンド編) - サーバ構築体験 with docker (コード編) - サーバ構築体験 with docker (image編)
- 6. 今回の構成 リバースプロキシ - Nginx アプリケーション(API) - Ruby On Rails(6.1.5) - ruby(3.0.5) アプリケーション(Front) - vue-cli データベース - MySql(8.0.23) 上記4つのコンテナを作成していきます。
- 9. ホストの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を追加
- 14. 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
- 15. 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
- 16. vueプロジェクトを作成 ・cd /var/www/src ・vue create . ・選択内容はスピーカーノート参照
- 22. 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
- 28. railsコンテナにRailsプロジェクトを作成 ③ ・rbenv global 3.0.5 ・ruby -v ・gem install rails -v 6.1.5 ・rails -v
- 29. 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
- 30. railsコンテナにRailsプロジェクトを作成 ⑤ ・npm install -g yarn ・yarn -v ・cd /var/www/src ・rails new . --api
- 31. コントローラーを作成 ・bin/rails g controller api/v1/samples index ・内容はスピーカーノートを参照
- 32. RailsのConfigファイルを編集 ・config/application.rbのApplicationクラス内に以下を追加 config.hosts << "workshop-local.jp" ・bin/rails s -b 0.0.0.0
- 33. 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を表示
- 40. vueプロジェクトを作成 ・docker-compose ps ・docker-compose exec vue bash ・pwd ・vue create . ・選択内容はスピーカーノート参照
- 49. Nginxの設定ファイルを作成(test.conf) api/docker/nginx直下にtest.confというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
- 54. Railsのプロジェクトを作成 ・docker-compose exec rails bash ・pwd ・ruby -v ・node -v ・yarn -v ・rails -v ・rails new . --api
- 55. コントローラーを作成 ・bin/rails g controller api/v1/samples index ・内容はスピーカーノートを参照
- 57. 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
- 61. 後片付け ・docker-compose down –rmi all
- 65. frontのコンテナを作成 ・docker-compose build ・docker-compose up -d ・docker-compose exec vue bash
- 75. Nginxの設定ファイルを作成(test.conf) api/docker/nginx直下にtest.confというファイルを作成してください。 内容はスピーカーノートからコピーしてください。
- 79. Railsのプロジェクトを作成 ・docker-compose exec rails bash ・pwd ・ruby -v ・node -v ・yarn -v ・rails -v ・rails new . --api
- 80. コントローラーを作成 ・bin/rails g controller api/v1/samples index ・内容はスピーカーノートを参照
- 84. 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
- 89. 片付け ・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を削除
Notes de l'éditeur
- 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