プログラミングの役立つ記事をお届けします

【簡単】DockerでFramework7の開発・ビルド環境を構築する

こんにちは、タカフです。

モバイルアプリのUIフレームワークとしてFramework7がめちゃくちゃ秀逸なのですが、
開発・ビルド環境を構築するのが少々面倒でした。

Framework7の環境構築にはローカルPCにnode.jsが必要なのですが、
例えばMacに初めてのnode.jsをインストールする場合、homebrew入れて、nodebrew入れて、パス通して、nodeのバージョン指定で入れて〜なんてやってくのが非常に面倒ですよね。

※因みに一応その手順は僕のブログで記事にしています。
https://kahoo.blog/how-to-install-for-nodejs-and-npm/

そして何よりその環境状態を共有出来ないので、チームで複数人で開発を進めるときにこの面倒な環境構築がネックとなる、ということが発生します。

それを解決してくれるのがDockerでした。

Dockerファイルでビルド環境を共有すればPCが違えども安定して開発・ビルド環境を構築することが出来ます

僕の方でやってみたら最初は苦労しましたが結構シンプルな形に着地したので備忘録の為にも記事にしたいと思います。

それでは本編に参りましょう。

Dockerのファイルを用意する

まずはこのプロジェクト用のディレクトリを作ってそこにDocker系のファイルを配置していきます。

最終的にはこのようなファイル構成となります。

今回は仮に my-f7app というプロジェクトディレクトリとしていきます。

まずはDockerfileを docker/node/Dockerfile の位置に作成します。

Dockerfile
FROM node:10

# framework7に必要なcordovaとframework7-cliのパッケージをインストールする
RUN npm i -g cordova framework7-cli --unsafe-perm=true --allow-root

僕の方で色々模索したところ、最初は最新の安定版であるnodeのv12を使ってFramework7の環境構築を試みましたがうまくいかないのでnodeのv10を指定します。
v10はうまくいきます。

そして、このカスタムイメージではcordovaとframework7-cliのパッケージをインストールしたものにします。

何もオプションをつけないとアクセス関係のエラーになるので、Framework7のドキュメントに従ってオプションを付け加えておきます。

次に、プロジェクトルートにdocker-compose.ymlを作成します。

docker-compose.yml
version: '3.5'
services:
  node:
    build: ./docker/node/
    working_dir: /app
    volumes:
      - ./app:/app
    ports:
      - "8080:8080"
    tty: true

ポイントを説明します。

WORK_DIRとしてappディレクトリを指定することで、諸々のコマンドはここで実行することになります。
ボリュームをホストPCのappディレクトリにしてファイルを永続化出来ます。これによりホストPC側のappディレクトリでFramework7の開発ソースコードをまとめられます。
ポートに8080をすることで、npm run devで起動するDocker内の開発サーバーにアクセス出来ます。
ttyはコンテナを起動したままにする為です。

これが用意出来たら起動します。

$ docker-compose up -d

これだけでv10のnodeをベースとして、cordovaもframework7-cliもインストールしたイメージが出来てコンテナを作ります。

Dockerの準備はこれでおしまいです。

Framework7 環境の構築

次にframework7 アプリ作っていきます。dockerのコンテナに向けて直接コマンドを叩いてOKです。

framework7 createを実行して適宜任意の値を入力していきます。

$ docker exec -it my-f7app_node_1 framework7 create
✔ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Blank
? Should we setup project with bundler? Webpack (recommended)
? Do you want to setup CSS Pre-Processor SCSS (SASS)
? Do you want to specify custom theme color? No, use default color theme
? Do you want to include Framework7 Icons and Material Icons icon fonts? Yes, include icon fonts

しばらくすると、これでローカルPCのappディレクトリにframework7のソースが生成されます。
今回は最小のアプリとしてます。

続いてapp/build/webpack.config.jsのファイルを編集します。

ここでdevServerというプロパティのopenの変更とhostの追記をします。

webpack.config.js
  devServer: {
    hot: true,
    // コンテナ上からブラウザ起動は出来ないのでこれはfalseとする
    open: false,
    compress: true,
    contentBase: '/www/',
    disableHostCheck: true,
    historyApiFallback: true,
    watchOptions: {
      poll: 1000,
    },
    // docker経由でアクセス可能にする為
    host: '0.0.0.0',
  },

ポイントを説明します。

openをfalseにすることでブラウザ起動するのを防ぎます。
ローカルPCでnpm run devする時はそのままブラウザ起動する意味ありますが、ここではDockerコンテナ内でブラウザ起動キックされても意味がないのでfalseにします。

そしてミソなのが host: '0.0.0.0' を追加することです。
デフォルトだとlocalhost:8080でアクセス出来るのですが、
それだとホストPCからアクセスした時にコンテナ内でlocalhostを名前解決してくれないみたいなのでこれをあえて指定します。

これはDockerのnode.jsサーバー構築するときのあるあるみたいです。

以下の記事を参考にしました。
https://qiita.com/hotdrop_77/items/a2ca316c97ba4b748d9a

Framework7 開発サーバーの起動と編集

準備が出来たら開発用サーバーをキックしてみましょう。

$ docker exec -it my-f7app_node_1 npm run dev

無事コマンドが通ったらホストPCからlocalhost:8080でアクセスしてみます。

無事表示されましたね!👍

試しに開発を想定して、app/src/css/app.scssに以下の記述を加えてファイル保存してみましょう。

/* Your app custom styles here */
.block-strong{
  p{
    font-size: 30px;
    color: red;
  }
}

自動で読み込まれてcssが適用されました!

開発サーバーまでの手順は以上となります。

あとはFramework7アプリ生成時に、PWAアプリやcordovaアプリを有効にすれば同じ様な感じでビルドコマンドが呼び出せることかと思います。

まとめ

今までローカルPCで環境構築していたのは何だったのかと思わせる程、Dockerを使うと超簡単にFramework7のコマンドが叩けるようになります。

これとFirebaseを組み合わせれば最強のモバイルアプリ環境を作れることでしょう。

現場からは以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です