Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to Deploy Flutter on Upsun
Upsun profile imageChad Carlson
Chad Carlson forUpsun

Posted on

How to Deploy Flutter on Upsun

Recently, a ticket came through regarding a user who wanted to deploy a Node.js frontend, but alongside a Flutter backend, and it that was something that was possible on Platform.sh/Upsun.

Youbetcha!

Deploying

To get started locally (I was on a Mac), I ran:

brewinstall--cask flutter
Enter fullscreen modeExit fullscreen mode

I found a (now archived, but still useful) example repository athttps://github.com/flutter/gallery, which showcases a number of example views and components.

git clone git@github.com:flutter/gallery.git&&cdgallerymkdir .upsuntouch .upsun/config.yaml
Enter fullscreen modeExit fullscreen mode

Create a new project (upsun project:create) and connect to the remote when prompted. Then edit the.upsun/config.yaml file to contain the following:

applications:gallery:variables:env:FLUTTER_VERSION_DL:"3.22.2"source:root:"gallery"type:"nodejs:20"hooks:build:|set -euxcurl -s \https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_$FLUTTER_VERSION_DL-stable.tar.xz \-o flutter.tar.xztar -xf $PLATFORM_APP_DIR/flutter.tar.xz -C .export PATH="$PLATFORM_APP_DIR/flutter/bin:$PATH"flutter build webweb:locations:/:root:build/webindex:-index.htmlexpires:2mscripts:falseallow:truerules:static\/*:expires:365droutes:"https://{default}/":id:gallerytype:upstreamprimary:trueupstream:"gallery:http""https://www.{default}":id:gallery-redirecttype:redirectto:"https://{default}/"
Enter fullscreen modeExit fullscreen mode

Flutter is downloaded during the build hook, so the choice oftype is largely arbitrary at this point. In this example, the most recent version (3.22.2) is used and set to the environment variableFLUTTER_VERSION_DL so that it can be downloaded. Finally, the commandflutter build web actually downloads dependencies and builds the application

With this configuration file now in hand, we can commit and push to Upsun:

git add.&& git commit-m"Upsunify the example."upsun push
Enter fullscreen modeExit fullscreen mode

And that's it! The configuration shown here works for many Flutter apps, including all of the examples inhttps://github.com/gskinnerTeam/flutter_vignettes.

Next steps

  1. Caching the install. Upsun provides a super flexible build process that's both completely configurationand smart enough to understand when a commit has been pushed that actually requires to rebuild an application. That assumption won't hold true for our downloads of Flutter though -- that is, we will redownload Flutter every time a commit requires a new build image, even if we want to continue to use the same version of Flutter. This build hook could be improved by utilizing Upsun's build cache to double check if the version has been edited by us, or otherwise reuse a cached download, which will save us some time.
  2. Nix. A great thing that's come out recently on Upsun is support for Nix via our composable image syntax. In the example so far, we used the legacytype: "node:20" syntax, which pulls one of our maintained image versions. Instead, we could configure the project like this:
applications:gallery:source:root:"gallery"stack:-"flutter"
Enter fullscreen modeExit fullscreen mode

Where thestack entry"flutter" pullsthe most recent version from Nix Packages.

Seeing as Upsun Nix support doesn't yet allow for the kind of version pinning we might want in Beta, we'll just have to hold off on that experiment until next time!

Until then, happy deploying!

Chad C.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

The NoOps platform for stress free deployments 🔥

Easily build, deploy, run, scale, and iterate your web applications on just one collaborative cloud application platform.

More fromUpsun

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp