00.ionic4:01.windowsでionicを始める方法
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.ionic4:01.windowsでionicを始める方法 [2019/02/10] – [開発環境] adash333 | 00.ionic4:01.windowsでionicを始める方法 [2019/02/12] (現在) – [オプション:nvm-windowsでNode.jsのバージョン管理] adash333 | ||
---|---|---|---|
行 12: | 行 12: | ||
<iframe width=" | <iframe width=" | ||
</ | </ | ||
+ | |||
+ | ===== すること ===== | ||
+ | *Ionic4アプリを作成し、GitHub経由でNetlifyにデプロイして公開する | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
+ | {{: | ||
+ | |||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 134: | 行 145: | ||
*以下のような画面になります。 | *以下のような画面になります。 | ||
{{: | {{: | ||
+ | *その中でも、この後、以下のコードの一部を利用します。 | ||
+ | {{: | ||
+ | |||
+ | *ローカルパソコンのVisualStudioCodeのターミナル画面に戻り、以下を入力します。(https:// | ||
+ | < | ||
+ | git add . | ||
+ | git remote add origin https:// | ||
+ | git push -u origin master | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | *GitHubの画面を更新すると、以下のようになります。 | ||
+ | {{: | ||
+ | |||
+ | ===== Netlifyにデプロイ ===== | ||
+ | *https:// | ||
+ | {{: | ||
+ | *画面右上の『New site from Git』をクリック | ||
+ | {{: | ||
+ | *GitHub をクリック | ||
+ | {{: | ||
+ | *Authorized の画面が出てから、以下のような画面に切り替わるので、今回は、" | ||
+ | {{: | ||
+ | {{: | ||
+ | *以下のように、'' | ||
+ | --prod%%'' | ||
+ | {{: | ||
+ | *次の画面で何分か待つと、うまくいくと、デプロイが完了して、リンクが表示されるので、画面上の方のリンクをクリック | ||
+ | {{: | ||
+ | *すると、無事、サイトが公開されます。このサイトは、自分のスマホなどでもアクセスすることができます。 | ||
+ | {{: | ||
+ | https:// | ||
+ | |||
+ | 以上となります。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | https:// | ||
+ | |||
+ | ===== オプション:nvm-windowsでNode.jsのバージョン管理 ===== | ||
+ | Node.jsもバージョンアップが繰り返されますが、npmが複数存在していると、'' | ||
+ | |||
+ | 参考:https:// | ||
+ | {{: | ||
+ | |||
+ | *以下のリンクから、最新版のnvm-setup.zipをダウンロード | ||
+ | https:// | ||
+ | {{: | ||
+ | *解凍して、中身のexeファイルをダブルクリックして起動し、指示に従ってインストール。 | ||
+ | {{: | ||
+ | *念のため、Windowsを再起動 | ||
+ | *VisualStudioCode(コマンドプロンプトでもOK)で適当なフォルダを開き、Ctrl+@でコマンドプロンプトを起動。(WSLなどに変更している場合は、'' | ||
+ | < | ||
+ | nvm -v | ||
+ | nvm list available | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | *LTS(Long Term Support=安定版)のうち、一番新しいバージョンを指定してインストールします | ||
+ | < | ||
+ | nvm install 10.15.1 | ||
+ | nvm use 10.15.1 | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | 上記の操作により、Windows10に、Node.js 10.15.1をインストールしたことと同じことになりました。 | ||
+ | |||
+ | ここに、yarn, | ||
+ | < | ||
+ | npm install -g yarn | ||
+ | npm install -g ionic cordova | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | 今回構築した環境 | ||
+ | < | ||
+ | Windows10 | ||
+ | nvm-windows 1.1.7 | ||
+ | Node 10.15.1 | ||
+ | npm 6.4.1 | ||
+ | yarn 1.13.0 | ||
+ | ionic@4.10.2 | ||
+ | cordova@8.1.2 | ||
+ | </ | ||
- | *以下のような画面になります。 | ||
===== リンク ===== | ===== リンク ===== | ||
- | 目次:[[00.ionic4: | + | 目次:[[00.ionic4: |
- | 前:[[00.ionic4: | + | 前:[[00.ionic4: |
次:[[00.ionic4: | 次:[[00.ionic4: |
00.ionic4/01.windowsでionicを始める方法.1549802104.txt.gz · 最終更新: 2019/02/10 by adash333