使用Ionic和Firebase在3天内创建一个照片共享应用程序-开发环境设置篇

11 月 ago

1 minute

我会总结一下本地开发环境的建设步骤。

请从以下网站安装最新版本的Visual Studio Code。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

如果有人尚未安装 Git，请一起安装 Git。

对于Windows，你可以访问https://gitforwindows.org/。

由于Ionic在Node.js上运行，因此请安装Node.js。
https://nodejs.org/ja/
确保安装的是最新版本，没有问题。

从这里开始，实际上会下载数据，所以请创建一个文件夹来存放源代码，无论在哪里都可以。在接下来介绍的命令中，假设在该文件夹中执行。

请使用终端进入工作文件夹后执行以下步骤。
我们将安装一个名为”Ionic CLI”的工具来支持Ionic4的开发。请在VisualStudioCode的终端中运行以下命令。

$ npm install -g ionic

请参考以下URL：https://ionicframework.com/docs/cli

安装完成后，让我们创建一个“应用程序模板”。由于AppName将成为应用程序的名称，所以请随意取一个名字。

$ ionic start AppName blank --type=angular

准备Firebase

请访问https://firebase.google.com并创建一个Firebase账户。如果您已经拥有谷歌账户，只需点击”前往控制台”即可直接登录。

登录后，请创建一个新项目。名称可以随意，但是id在之后无法更改，所以暂时设为”AppName-dev”吧。
※因为在发布时，准备干净的新环境会更顺利。

请回到本地环境，并安装Firebase CLI。这是一个方便的工具，可以轻松部署，并有上传名为”functions”的服务器端处理功能的功能。

$ npm install -g firebase-tools

请在查看https://firebase.google.com/docs/cli/?hl=ja后进行登录操作。

$ firebase login

如果能成功登录，则进行项目初始化。在此过程中，需要选择项目，如果尚未创建项目，请从Firebase控制台创建。

firebase init

执行下面的命令将自动开始构建。

$ ionic build --prod

建成之后，我们立即进行部署。为了进行部署，需要确保 firebase CLI 的设置已经完成。

$ firebase deploy

如果你在这里失败了，那么肯定是在某个地方出错了，所以请从头再试一次。

以上是环境搭建完成。