- 投稿日:2021-01-09T23:08:06+09:00
NodejsでWebアプリケーション作成 with Docker
前提
ProgateのNodejsコース完了程度の知識があること。
Docker使える。
VSCodeでDocker入門本記事の対象者
ProgateでNodejs学んだ。次は自分のプロジェクトを作ってみたいって人
本記事でやること
- DockerでNodejs環境を作る
- プロジェクトの作成
- ライブラリのインストール
- ブラウザ上でページを確認
環境
Docker
VSCode
Node 14.15
Gitプロジェクトの作成
まず適当な場所にプロジェクトのフォルダを作成。
本記事ではnodejs-sample-app
という名前で作った。そして、そのフォルダをVSCodeで開く。
以下のファイルを作成
docker-compose.ymlversion: "3" services: node: image: node:14.15 volumes: - .:/project tty: true working_dir: /project command: bashNodeのバージョンは14.15を指定しておく。
コンテナに入ってバージョンを確認。
root@cf2295d42525:/project# node -v v14.15.4そしたらプロジェクトを作る準備が完了。
ここからnpmコマンドを使ってプロジェクトを構築する。
以下のコマンドを打つと、プロジェクトに
package.json
というファイルが作成される。
$ npm init -y
root@cf2295d42525:/project# npm init -y Wrote to /project/package.json: { "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }package.json は Nodejsプロジェクトの様々な情報をかくところと把握しておけばOK
次に Webアプリケーション において一番最初に呼ばれるjsファイルを作る。
package.json と同じ階層に以下のように作成app.jsconsole.log("Hello nodejs");そうしたら、以下のコマンドで実行されるか確かめる
root@cf2295d42525:/project# node app.js Hello nodejsHello nodejs と表示されたらOK
次に package.json を以下のように変更
package.json{ "name": "project", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "keywords": [], "author": "", "license": "ISC" }mainを修正 testの末尾にカンマ追加, scripts.start追加
そうすると、
npm start
でscripts.startで指定したコマンドが呼ばれるようになる。root@cf2295d42525:/project# npm start > project@1.0.0 start /project > node app.js Hello nodejsこれでひと段落。
このタイミングで
git init
すると良い。expressのインストールのルーティング
expressのインストール
$ npm install expresspackage.jsonに以下のように追記される
{ ... "dependencies": { "express": "^4.17.1" } }そして、node_modulesというフォルダと package-lock.jsonというファイルができる。
node_modulesにはインストールしたpackageが入る。
これはプッシュしたくないのでgitignoreを作成してつっこむ。node_modules/installして差分がでてるのでここでcommit。
ルーティングを作成
app.jsconst express = require('express'); const app = express(); app.get('/', (req, res) => { res.render("index", {message: "うおおおおおお"}) }); const port = process.env.PORT || 3000 app.listen(port, () => console.log(`server started port ${port}`));
npm start
すると、以下のように表示される。root@cf2295d42525:/project# npm start > project@1.0.0 start /project > node app.js server started port 3000しかし、今のままではブラウザでひらけない
docker-composeにportについて記述する必要がある。
docker-compose.ymlversion: "3" services: node: image: node:14.15 volumes: - .:/project tty: true working_dir: /project ports: - "3000:3000" command: npm startportsを追加し、コンテナを立ち上げた時に npm start 実行するように変更した。
docker-compose を編集したら、コンテナを作り直す必要がある。
一度コンテナを消して以下を実行$ docker-compose up -dちゃんとサーバーとして起動しているかログを確認
nodejs-sample-app(main)$ docker-compose logs Attaching to nodejs-sample-app_node_1 node_1 | node_1 | > project@1.0.0 start /project node_1 | > node app.js node_1 | node_1 | server started port 3000いけてそう。
ブラウザで確認
ejs
ejsを使うためにインストール
$ npm install ejs
viewsフォルダを作成し、その中にejsファイルを作成
views/index.ejs<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> <p><%= message %></p> </body> </html>app.jsconst express = require('express'); const app = express(); app.get('/', (req, res) => { res.render("index.ejs", {message: "うおおおおおお"}) }); const port = process.env.PORT || 3000 app.listen(port, () => console.log(`server started port ${port}`));renderでejsを描画し、「message」を埋め込む
- 投稿日:2021-01-09T22:56:27+09:00
WSWSL2 Docker VSCodeでJava開発環境を構築
WSL2 Docker VSCodeでJava開発環境を構築
WSL2とDockerとVSCodeで開発環境を作るのがホットな話題だったので試してみたのですが、
作ったものの開発環境の動作が重すぎてドはまりしました。
オチとしては開発ソースを軽量Linuxのフォルダ内でなくWindowsフォルダにおいていたのが原因でした。
自分への戒めのため手順を残しておきます。WSL2のインストール
Linux 用 Windows サブシステムを有効にする
管理者として PowerShell を開き、以下を実行します。
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart仮想マシンの機能を有効にする
管理者として PowerShell を開き、以下を実行します。
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestartマシンを再起動します。
Linux カーネル更新プログラム パッケージをダウンロードする
- 最新のパッケージをダウンロードし、インストールします。
x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージWSL 2 を既定のバージョンとして設定する
PowerShell を開いて次のコマンドを実行し、新しい Linux ディストリビューションをインストールする際の既定のバージョンとして WSL 2 を設定します。
wsl --set-default-version 2選択した Linux ディストリビューションをインストールする
- Microsoft Storeを開き、希望する Linux ディストリビューションを検索し、選択します。
- ディストリビューションのページで、[入手] を選択します。ここではUbuntu 20.04 LTSを入手します。
- Ubuntu 20.04LTSを起動し、ユーザー名・パスワードを入力します。
- コマンド
sudo apt-get update
でUbuntu を更新しておきます。WSLのフォルダを確認
WindowsからWSLのLinuxファイルシステムにはエクスプローラーに以下のパスを入力することでアクセスできます。
\\wsl$Ubuntu20.04LTSの場合は以下になります。
\\wsl$\Ubuntu-20.04WSL+Dockerを利用して開発を行うときは、ソース等をこの配下に配置します。
またWSLからWindowsのフォルダを参照するとWSLのターミナルからは
下記とおりになります。/mnt/c/※こちらですが、この配下にソースを置いておくとLinuxシステムからWindowsシステムへの参照が行われるため、ファイル I/O が異常に遅くなりますの気を付けてください。
WSLのリソースを制限
WSLはデフォルトだとホストマシンの物理メモリの80%を確保するようで、
ホストのメモリ不足が発生する可能性があるので、設定を変更します。
以下のファイル(なければ新規作成)に設定を記述します。
%USERPROFILE%\.wslconfig
記述内容は以下になります。
[wsl2] memory=4GB swap=0 processors=2くわしくはWSL コマンドと起動構成を参照
設定を反映させるにはWSLを再起動します。
PowerShellから以下のコマンドを実行し、WSLのターミナルを立ち上げなおすことで再起動されます。
wsl --shutdown起動中のWSLを確認するにはPowerShellで以下のコマンドを実行します。
wsl -l -vDockerのインストール・設定
インストール
Docker Desktopをインストール
インストール時にEnable WSL 2 Windows Features
のチェックをいれること設定
Docker Desktopを起動し、タスクバーのDockerのアイコンを右クリックし
setteings
を起動
- Generalにて
Use the WSL 2 based engine
にチェックがはいっていること- Resourcesにて
Enable integration with my default WSL distro
にチェックがはいっていること。
※PowerShellでwsl -l
コマンドで表示したリストで規定になっているDistroからDockerDesktopを使用できる。VSCodeの設定
環境変数の設定
Windowsの環境変数のPATHに以下のようにVScodeのbinフォルダを設定しておくと
WSLからコマンドでVSCodeを起動できるようなります。
C:\app\VSCode\bin
拡張機能のインストール
Remote Developmentをインストールします。
Remote Development は複数の拡張機能が含まれますが、
今回は特にRemote - Containerを使用します。
他には以下のような拡張機能もインストールされます。
- Remote - WSL
- Remote - SSH
VSCodeの起動
- WindowsTerminal or Ubuntuターミナルを起動
- コマンド
cd ~
を実行してホームフォルダに移動- コマンド
pwd
でホームフォルダのパスを確認
WSL 上では/home/ユーザー名
になります。
Windows上 では\\wsl$\Ubuntu-20.04\home\ユーザー名
になります。
- 任意のフォルダを作成し移動
mkdir dev_root cd dev_root
- VsCodeの起動
code .
Remote コンテナの作成
ctrl + shift + p
を押し、
remote-containers: Open Folder in Container
を入力下記通りプロンプトが表示されるのでそれぞれ選択を行う
- フォルダを選択
- Dockerイメージを選択→ javaを選択
- Javaバージョンを選択→11を選択
- ビルドツールを選択→maven gradle nodeはお好みで選択
Javaプロジェクトの作成
VsCodeのターミナルから
spring boot initializrでプロジェクトのひな型を作成curl https://start.spring.io/starter.zip \ -d dependencies=web \ -d javaVersion=11 \ -o demo.zipプロジェクトのひな型を解凍
unzip demo.zipDemoApplication.javaを下記通り編集
package com.example.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } @GetMapping("/") public String index(){ return "hello World"; } }
F5
キーを押し、デバッグ実行を行いhttp://localhost:8080/にアクセスするRemote-Containerについての補足
Remote-Containerを利用すると
.devcontainer
フォルダが作成され、そこに以下の二つのファイルが作成されます。
devcontainer.json
こちらにはビルドするDockerファイルやDocker Composeファイルを指定したり、
コンテナのVsCodeの設定(java.homeとか)やインストールしたい拡張機能(spring-boot-extention-pack等)を記述することができます。Dockerfile
コンテナをビルドするためのDockerファイルになります。今回は拡張機能(MS)が用意しているDockerイメージを使用しましたが、
Docker Hub等にアップされている自分の好きなDockerイメージに変更することが可能です。この記事は以下の情報を参考にして執筆しました。
- 投稿日:2021-01-09T22:27:10+09:00
【初めてのチーム開発②】Dockerで環境構築するまで
前回からの続きです。
Docker+Rails+Vue+MySQLの開発環境を作ったので、その備忘録。
(※本記事は適宜編集します。)手順
- 前準備
- Dockerfile作成 (Rails, Vue)
- docker-compose.yml作成
- プロジェクト作成
- 動作確認
- GitHubにpush
1. 前準備
・作業用ブランチ作成
$ git branch (→developブランチにいることを確認) $ git checkout -b feature/docker-test [この時点でのブランチの構造] main develop └── feature/docker-test <- New!・バージョン確認etc.
$ docker -v Docker version 19.03.8, build afacb8b $ docker-compose -v docker-compose version 1.25.4, build 8d51620a・最終的なディレクトリ構成はこちら。【参考】
[project_name] ├── api │ ├── Dockerfile │ ├── Gemfile │ └── Gemfile.lock ├── docker-compose.yml └── front ├── Dockerfile ├── ...2. Dockerfile作成
RailsとVueのDockerfileをそれぞれ作成していきます。
まずはディレクトリを作成。
(現在のディレクトリ: project_name) $ mkdir api front $ ls api front2.1 Rails
RailsのDockerfileを作ります。
$ touch api/Dockerfile
api/DockerfileFROM ruby:2.7.1 RUN apt-get update -qq && \ apt-get install -y build-essential \ libpq-dev \ nodejs \ && rm -rf /var/lib/apt/lists/* RUN mkdir /app ENV APP_ROOT /app WORKDIR $APP_ROOT ADD ./Gemfile $APP_ROOT/Gemfile ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock RUN bundle installこのDockerfileは「Railsを含むGemfile」を別途必要とします。
そこでapi下にGemfile, および空のGemfile.lockを作成します。
$ touch api/Gemfile
$ touch api/Gemfile.lock
api/Gemfilesource 'https://rubygems.org' gem 'rails', '~> 6.0.3'2.2 Vue
次にVueのDockerfileを作ります。
$ touch front/Dockerfile
front/DockerfileFROM node:12.18.3-alpine ENV APP_HOME /app RUN mkdir -p $APP_HOME WORKDIR $APP_HOME RUN apk update && npm install -g @vue/cli3. docker-compose.yml作成
次に、プロジェクトディレクトリ下にdocker-compose.ymlを作成します。
docker-compose.ymlversion: '3' services: web: build: ./api command: bundle exec rails s -p 3000 -b '0.0.0.0' ports: - '3000:3000' depends_on: - db volumes: - ./api:/app - bundle:/usr/local/bundle tty: true stdin_open: true db: image: mysql:5.7 volumes: - mysql_data:/var/lib/mysql/ environment: MYSQL_ROOT_PASSWORD: password ports: - '3306:3306' front: build: ./front volumes: - ./front:/app - node_modules:/app/node_modules ports: - '8080:8080' tty: true stdin_open: true command: npm run serve volumes: mysql_data: bundle: node_modules:4. プロジェクト作成
ここからが本番!
RailsプロジェクトとVueプロジェクトを順番に作っていきます。
Vueはvue-cli
というものを使って、対話的に作成していきます。4-1. Rails
Railsプロジェクト作成
まず
rails new
でRailsプロジェクトを作成。
apiディレクトリ下に、Railsのファイル群が作成されます。
※ 少し時間かかります。$ docker-compose run web rails new . --force --database=mysql --apidockerイメージ更新
Gemfileが更新されたので、buildしてdockerイメージを更新しておきます。
$ docker-compose builddatabase.ymlの修正
RailsのDB設定ファイル
api/config/database.yml
を修正します。
なお(password)
はdocker-compose.ymlの環境変数MYSQL_ROOT_PASSWORD
で指定したものを記述してください。api/config/database.ymldefault: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root - password: + password: (password) - host: localhost + host: dbDBの作成
$ docker-compose run web rails db:create[追記] 上記コマンドでエラー発生→解決しました。
自分の対応$ docker-compose run web rails db:create → Access Denied エラー $ docker-compose down --volumes $ docker-compose up -d $ docker-compose run web rails db:create → Errno::ENOENT エラー $ docker-compose down $ docker-compose run web rails db:create → 成功 Created database 'app_development' Created database 'app_test'参考:https://qiita.com/fujisawatk/items/80da801c7e2ac68e4887
…原因はvolume周り? Dockerの理解がまだまだ十分ではないですね…(^_^;)
$ docker-compose up -d
をしてみて、localhost:3000にアクセスし、正常に表示されれば成功です!4-2. Vue
vue-cliでVueプロジェクトを作成します。
コンテナ内に入り、vue-cliを使って対話的にVueプロジェクトを作成します。
※設定内容は一例です。参考:https://qiita.com/Kyou13/items/be9cdc10c54d39cded15
$ docker-compose run front sh (←Vueコンテナでシェルを実行)以下、設定内容です。
$ vue create . # 現在のディレクトリ(/app)に作成するかの確認 ? Generate project in current directory? (Y/n) Yes # プリセットを使用するかどうか ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) ❯ Manually select features # TypeScriptをインストールするためこちらを選択 # プロジェクトにインストールするライブラリの選択 ? Check the features needed for your project: ◉ Choose Vue version # ◉ Babel ❯◉ TypeScript # TypeScriptをインストールする場合はこれを選択 ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # Vueバージョンの選択 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 2.x 3.x (Preview) # Class styleを使用するかどうか。私はObject styleを使うため No ? Use class-style component syntax? (Y/n) No # TypeScriptと一緒にbabelを使うか ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes # LintとFormatterの設定に何を使うか ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier TSLint (deprecated) # Lintの実行タイミング ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save # 保存時にLintを実行 ◯ Lint and fix on commit (requires Git) # Babel, ESLintなどの設定をどこに記述するか ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files # 各設定ファイルにする In package.json # 今回設定した内容をプリセットで保存するか。基本的にはプロジェクトを以降作成することはないため No ? Save this as a preset for future projects? No # パッケージマネージャーに何を使うか ? Pick the package manager to use when installing dependencies: (Use arrow keys) Use Yarn ❯ Use NPMインストール完了後、
Ctrl+D
でコンテナを停止します。
またfront/Dockerfile
を以下のように書き換えます。FROM node:12.18.3-alpine ENV APP_HOME /app RUN mkdir -p $APP_HOME WORKDIR $APP_HOME RUN apk update (変更) COPY package.json . (追加) RUN npm install (追加)5. 動作確認
Rails
localhost:3000
にアクセスし、「Yay! you are on Rails!」が表示されたら成功。
Vue
localhost:8080
にアクセスし、
が表示されたら成功。6. GitHubにpush
$ git status On branch feature/docker-test nothing to commit, working tree clean $ git push origin feature/docker-test参考記事
(本記事)
・DockerでRails + Vue + MySQLの環境構築をする方法【2020/09最新版】
・Docker Rails Vue.js MySQL環境構築
・開発環境をDockerに乗せる方法とメリットを3ステップで学ぶチュートリアル
・【Mac】Dockerと開発環境の作り方(その他、チーム開発手法)
・git develop, feature branch作成からmergeするまで (自分用メモ)
★Githubでチーム開発するためのマニュアル
- 投稿日:2021-01-09T22:27:10+09:00
【初めてのチーム開発②】Dockerで環境構築する
前回からの続きです。
Docker+Rails+Vue+MySQLの開発環境を作ったので、その備忘録。
(※本記事は適宜編集します。)手順
- 前準備
- Dockerfile作成 (Rails, Vue)
- docker-compose.yml作成
- プロジェクト作成
- 動作確認
- GitHubにpush
1. 前準備
・作業用ブランチ作成
$ git branch (→developブランチにいることを確認) $ git checkout -b feature/docker-test [この時点でのブランチの構造] main develop └── feature/docker-test <- New!・バージョン確認etc.
$ docker -v Docker version 19.03.8, build afacb8b $ docker-compose -v docker-compose version 1.25.4, build 8d51620a・最終的なディレクトリ構成はこちら。【参考】
[project_name] ├── api │ ├── Dockerfile │ ├── Gemfile │ └── Gemfile.lock ├── docker-compose.yml └── front ├── Dockerfile ├── ...2. Dockerfile作成
RailsとVueのDockerfileをそれぞれ作成していきます。
まずはディレクトリを作成。
(現在のディレクトリ: project_name) $ mkdir api front $ ls api front2.1 Rails
RailsのDockerfileを作ります。
$ touch api/Dockerfile
api/DockerfileFROM ruby:2.7.1 RUN apt-get update -qq && \ apt-get install -y build-essential \ libpq-dev \ nodejs \ && rm -rf /var/lib/apt/lists/* RUN mkdir /app ENV APP_ROOT /app WORKDIR $APP_ROOT ADD ./Gemfile $APP_ROOT/Gemfile ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock RUN bundle installこのDockerfileは「Railsを含むGemfile」を別途必要とします。
そこでapi下にGemfile, および空のGemfile.lockを作成します。
$ touch api/Gemfile
$ touch api/Gemfile.lock
api/Gemfilesource 'https://rubygems.org' gem 'rails', '~> 6.0.3'2.2 Vue
次にVueのDockerfileを作ります。
$ touch front/Dockerfile
front/DockerfileFROM node:12.18.3-alpine ENV APP_HOME /app RUN mkdir -p $APP_HOME WORKDIR $APP_HOME RUN apk update && npm install -g @vue/cli3. docker-compose.yml作成
次に、プロジェクトディレクトリ下にdocker-compose.ymlを作成します。
docker-compose.ymlversion: '3' services: web: build: ./api command: bundle exec rails s -p 3000 -b '0.0.0.0' ports: - '3000:3000' depends_on: - db volumes: - ./api:/app - bundle:/usr/local/bundle tty: true stdin_open: true db: image: mysql:5.7 volumes: - mysql_data:/var/lib/mysql/ environment: MYSQL_ROOT_PASSWORD: password ports: - '3306:3306' front: build: ./front volumes: - ./front:/app - node_modules:/app/node_modules ports: - '8080:8080' tty: true stdin_open: true command: npm run serve volumes: mysql_data: bundle: node_modules:4. プロジェクト作成
ここからが本番!
RailsプロジェクトとVueプロジェクトを順番に作っていきます。
Vueはvue-cli
というものを使って、対話的に作成していきます。4-1. Rails
Railsプロジェクト作成
まず
rails new
でRailsプロジェクトを作成。
apiディレクトリ下に、Railsのファイル群が作成されます。
※ 少し時間かかります。$ docker-compose run web rails new . --force --database=mysql --apidockerイメージ更新
Gemfileが更新されたので、buildしてdockerイメージを更新しておきます。
$ docker-compose builddatabase.ymlの修正
RailsのDB設定ファイル
api/config/database.yml
を修正します。
なお(password)
はdocker-compose.ymlの環境変数MYSQL_ROOT_PASSWORD
で指定したものを記述してください。api/config/database.ymldefault: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root - password: + password: (password) - host: localhost + host: dbDBの作成
$ docker-compose run web rails db:create[追記] 上記コマンドでエラー発生→解決しました。
自分の対応$ docker-compose run web rails db:create → Access Denied エラー $ docker-compose down --volumes $ docker-compose up -d $ docker-compose run web rails db:create → Errno::ENOENT エラー $ docker-compose down $ docker-compose run web rails db:create → 成功 Created database 'app_development' Created database 'app_test'参考:https://qiita.com/fujisawatk/items/80da801c7e2ac68e4887
…原因はvolume周り? Dockerの理解がまだまだ十分ではないですね…(^_^;)
$ docker-compose up -d
をしてみて、localhost:3000にアクセスし、正常に表示されれば成功です!4-2. Vue
vue-cliでVueプロジェクトを作成します。
コンテナ内に入り、vue-cliを使って対話的にVueプロジェクトを作成します。
※設定内容は一例です。参考:https://qiita.com/Kyou13/items/be9cdc10c54d39cded15
$ docker-compose run front sh (←Vueコンテナでシェルを実行)以下、設定内容です。
$ vue create . # 現在のディレクトリ(/app)に作成するかの確認 ? Generate project in current directory? (Y/n) Yes # プリセットを使用するかどうか ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) ❯ Manually select features # TypeScriptをインストールするためこちらを選択 # プロジェクトにインストールするライブラリの選択 ? Check the features needed for your project: ◉ Choose Vue version # ◉ Babel ❯◉ TypeScript # TypeScriptをインストールする場合はこれを選択 ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # Vueバージョンの選択 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 2.x 3.x (Preview) # Class styleを使用するかどうか。私はObject styleを使うため No ? Use class-style component syntax? (Y/n) No # TypeScriptと一緒にbabelを使うか ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes # LintとFormatterの設定に何を使うか ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier TSLint (deprecated) # Lintの実行タイミング ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save # 保存時にLintを実行 ◯ Lint and fix on commit (requires Git) # Babel, ESLintなどの設定をどこに記述するか ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files # 各設定ファイルにする In package.json # 今回設定した内容をプリセットで保存するか。基本的にはプロジェクトを以降作成することはないため No ? Save this as a preset for future projects? No # パッケージマネージャーに何を使うか ? Pick the package manager to use when installing dependencies: (Use arrow keys) Use Yarn ❯ Use NPMインストール完了後、
Ctrl+D
でコンテナを停止します。
またfront/Dockerfile
を以下のように書き換えます。FROM node:12.18.3-alpine ENV APP_HOME /app RUN mkdir -p $APP_HOME WORKDIR $APP_HOME RUN apk update (変更) COPY package.json . (追加) RUN npm install (追加)5. 動作確認
Rails
localhost:3000
にアクセスし、「Yay! you are on Rails!」が表示されたら成功。
Vue
localhost:8080
にアクセスし、
が表示されたら成功。6. GitHubにpush
$ git status On branch feature/docker-test nothing to commit, working tree clean $ git push origin feature/docker-test参考記事
(本記事)
・DockerでRails + Vue + MySQLの環境構築をする方法【2020/09最新版】
・Docker Rails Vue.js MySQL環境構築
・開発環境をDockerに乗せる方法とメリットを3ステップで学ぶチュートリアル
・【Mac】Dockerと開発環境の作り方(その他、チーム開発手法)
・git develop, feature branch作成からmergeするまで (自分用メモ)
★Githubでチーム開発するためのマニュアル
- 投稿日:2021-01-09T21:16:08+09:00
Dockerの設定やあれこれ
はじめに
Windows10 ProにおけるDockerの導入と使用するコマンドについてまとめる
Windows10 Homeについては、Hyper-Vが使えないため別の手順になるので、参考サイトを参照してください導入の流れ
Windows機能の設定
WSL2 Linuxカーネル更新用プログラムパッケージをインストール
- Microsoft Docsから最新版のパッケージをダウンロード
Dockerのダウンロード
サイトに移動してGet Docker
を選択
インストール
コマンド
基本コマンド
# hello-world docker run hello-world # Docker イメージのダウンロード docker pull [image name] # 所有しているDockerイメージリストの取得 docker images # 現在動いているDockerコンテナを取得 docker ps # 所有している全てのDockerコンテナを取得 docker ps -a # Dockerコンテナの削除 docker rm [Container ID] # Docker イメージの削除 docker rmi [image name] # Dockerコンテナの停止 docker stop [Container Name] # Dockerコンテナの実行(2回目) docker start [Container Name] # Docker Versionの取得 docker --versiondocker runコマンド
# Dockerコンテナ名の指定 docker --name [Container Name] [Image Name] # インタラクティブに通信を行う docker -it [Container Name] # Dockerコンテナをバックグラウンドで実行 docker -d [Container Name] # Dockerコンテナに外部からアクセス docker run -p [外部ポート]:[コンテナポート]Docker仮想ディスクサイズの最適化(自己責任で)
wsl --shutdown cd %LocalAppData%\Docker\wsl\data\ext4.vhdx Optimize-VHD -Path .\ext4.vhdx -Mode full参考リンク先
- Docker 公式ドキュメント : Docker Docs
- 共有Dockerイメージ : Docker Hub
- Hyper-V 有効化 公式ドキュメント : Microsoft Docs
- 投稿日:2021-01-09T16:31:01+09:00
Raspberry Pi 3のDockerでRedmineを立ち上げました
はじめに
以前、MacのDockerではRedmineを立ち上げたことがあったのですが、同じようにやったらうまくいきませんでした。
なので、立ち上げるまでを記録として残します。
Raspberry Pi 3にDockerをインストールするのは、以下で実施済み。失敗
失敗した、docker-compose.yml
前回、Macの時に利用したdocker-compose.ymlです。
docker-compose.ymlversion: '3.8' services: redmine: container_name: redmine image: redmine restart: always ports: - 3000:3000 volumes: - ./Redmine/plugins:/usr/src/redmine/plugins - ./Redmine/themes:/usr/src/redmine/public/themes environment: REDMINE_DB_MYSQL: redmine-db REDMINE_DB_PASSWORD: redmine redmine-db: image: mariadb container_name: redmine-db restart: always environment: MYSQL_ROOT_PASSWORD: redmine MYSQL_DATABASE: redmine volumes: - ./db:/var/lib/mysql command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ciどんなエラーが発生したか
途中は省きます。
mariadbのところで、"no matching manifest for linux/arm/v7 in the manifest list entries"が発生しました。$ docker-compose up -d Pulling redmine-db (mariadb:)... latest: Pulling from library/mariadb ERROR: no matching manifest for linux/arm/v7 in the manifest list entries調べた記事
Debian(Raspberry PiのOS)だとmariadbもmysqlもうまくいかないみたい。
- no matching manifest for linux/arm64/v8 in the manifest list entries #698
- support arm64 architecture #318
解決策
DockerHubにある、以下のイメージを使ってみることにしました。
成功
docker-compose.yml
最終的なdocker-compose.ymlはこちら。
imageを変更しただけです。docker-compose.ymlversion: '3.8' services: redmine: container_name: redmine image: redmine restart: always ports: - 3000:3000 volumes: - ./Redmine/plugins:/usr/src/redmine/plugins - ./Redmine/themes:/usr/src/redmine/public/themes environment: REDMINE_DB_MYSQL: redmine-db REDMINE_DB_PASSWORD: redmine redmine-db: image: hypriot/rpi-mysql container_name: redmine-db restart: always environment: MYSQL_ROOT_PASSWORD: redmine MYSQL_DATABASE: redmine volumes: - ./db:/var/lib/mysql command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_cidocker-compose up
イメージの確認。
$ docker images REPOSITORY TAG IMAGE ID CREATED SIZE redmine latest f2b5b69f9ad5 4 weeks ago 440MB hypriot/rpi-mysql latest 4f3cbdbc3bdb 2 years ago 209MB立ち上げてみよう。
$ docker-compose up -d Creating redmine ... done Creating redmine-db ... doneRaspberry Pi 3のDockerでRedmineが立ち上がっているはずなので、Macからアクセスしてみる。
事前にifconfig
でIPアドレスを確認しておいて、ブラウザで http://000.000.000.000:3000 にアクセス。無事にアクセスできました。
まとめ
記載すると単純だけれど、別のイメージに差し替えるまでの確認に意外と時間がかかりました。
Dockerはイメージが色々あってとても助かります。