Skip to main content
Version: v8

Build and Distribute your App

最初のアプリを構築したので、みんなが使い始められるように配布したくなるでしょう。アプリケーションをビルドしてデプロイする仕組みはかなり面倒なことがあります。ここでAppflow の出番です。Appflow を使えば、ウェブとネイティブのビルドを効率的に生成し、ライブアプリの更新をプッシュし、アプリをアプリストアに公開し、全体のプロセスを自動化することができます。詳細は Appflow クイックスタートガイド を参照してください。

Below we will run through an overview of the steps.

Connect Your Repo​

Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code.

For more on connecting your code repository to Appflow, checkout the Connect your Repo section inside the Appflow docs.

Install the Appflow SDK​

The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.

To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the Deploy > Destinations section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory:

ionic deploy add  \
    --app-id="YOUR_APP_ID" \
    --channel-name="YOUR_CHANNEL_NAME" \
    --update-method="background|auto|none" \

For prerequisite and additional instructions on installing the Appflow SDK, visit the Install the Appflow SDK section inside the Appflow docs.

Push a Commit​

In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows:

git add . # stage any changes
git commit -m "added appflow sdk" #  commit staged changes
git push origin main # push the changes from the main branch to your git host

プッシュが行われた後、コミットは Appflow ダッシュボードのCommits タブに表示されます。詳細は、Appflow のドキュメント内の コミットをプッシュする セクションを参照してください。

Deploy a Live Update​

With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.

To get the live update deployed, a Web build will need to be created. This can be done through the Start build icon from the Commits tab or by clicking the New build button in the top right corner of the Build > Builds tab. After selecting the correct commit to deploy, select the Web target platform and the Latest build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable Live Update and pick the Channel to automatically assign the build to once it successfully completes.

Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the Deploy live updates button in the build detail page. The same can be done by clicking the Deploy live updates icon on the build in the Build > Builds tab and select the Channel from the dropdown.

To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command:

ionic cordova run [ios | android] [options]

アプリがデプロイしたチャンネルを正しくリッスンするように設定されている場合、セットアップ時に自動更新方法を選択していれば、起動時にアプリはすぐに更新されるはずです。バックグラウンド更新方法を選択した場合は、更新がダウンロードされたことを確認するために、約 30 秒間アプリに滞在してください。その後、アプリケーションを閉じて再度開くと、更新が適用されます！

To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the Deploy a Live Update section inside the Appflow docs.

Build a Native Binary​

Next up is a native binary for your app build and deploy process. This is done via the Ionic Package service. First things first, you will need to create a Package build. This can be done by clicking the Start build icon from the Commits tab or by clicking the New build button in the top right from the Build > Builds tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.

Given a successful Package build, an iOS binary (.ipa or IPA) or/and an Android binary (.apk or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the Artifacts section in the right of the build detail page or clicking the Download IPA/APK icon on the build in the Build > Builds tab.

Further information regarding building native binaries can be found inside of the Build a Native Binary section inside the Appflow docs.

Create an Automation​

Automations enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger Package builds and Deploy builds every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.

詳細については、Appflow ドキュメント内のAutomation の作成セクションをご覧ください。そのセクションでは単一の自動化の作成方法について説明しています。ただし、異なるブランチやワークフローのために複数の自動化を作成し、ニーズに合わせてカスタマイズすることも可能です。重要な注意点として、自動化を作成する機能はBasic プラン以上で利用可能です。

Create an Environment​

Package builds and Deploy builds can be further customized via Environments. This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the Automation feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.

Creating an Environment is available for those on our Basic plans and above. More information on this can be found in the Create an Environment section within the Appflow docs.

Create a Native Configuration​

Native Configurations allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any Package build or Automation.

Native configs can be used to:

For access to the ability to create a Native Configuration, you will need to be on our Basic plans and above. Additional details of this feature can be found in the Create a Native Configuration section within the Appflow docs.

What’s Next?​

Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices!

There are many paths to follow from here. Try adding another Ionic UI component to the app, or more native functionality. The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.

Happy app building! 💙

Contents

Edit this page