Published Date : 2020年11月1日15:26

Upload Blazor's app to Heroku

This blog has an English translation

YouTubeにアップした動画、「【日本語解説】BlazorのアプリをHerokuにアップしてみよう【Blazor, Heroku】」の補足説明の記事です。

Here's a little more about the 「【Blazor, Heroku】Upload Blazor's app to Heroku」 video I uploaded to YouTube.


I thought it would be better to separate the video into English audio and Japanese audio instead of adding subtitles to the video, so I uploaded the same video with Japanese and English audio separately.


There is a Japanese explanation video at the top of the page, and an English explanation video link at the end of the page.


Table of Contents

① 動画の説明
① Video Description


Let's upload the Blazor application we created last time to Heroku.


First of all, we prepare for it, publish the Blazor app.

作成したプロジェクトのフォルダを開いて、フォルダ内で[SHIFT + マウス右クリック]を行い、powershellを開きます。

Open your project folder, do [SHIFT + right mouse click] in the folder, and open the powershell.

そして、powershellに[dotnet publish -c Release]と入力して実行します。

Then type [dotnet publish -c Release] in the powershell and run it.

dotnet publish -c Release


Now let's run the app on a local server and see how it works.

[wwwroot]フォルダがあるフォルダ内に移動して、[dotnet あなたのアプリの名前.Server.dll]と入力して実行してください。

Navigate to the folder containing the [wwwroot] folder and enter [dotnet Your-app-name.Server.dll] to execute.

cd C:\Users\user\Your-app-name\Your-app-name\Server\bin\Release\netcoreapp3.1\publish
dotnet Your-app-name.Server.dll


If successful, try launching the appropriate browser and typing [localhost:5000] in the search window to see what happens.


Next, log in to Heroku and create a new application.

HerokuやHeroku CLIやDockerに関しては以前の動画を参考にしてください。

For more on Heroku, the Heroku CLI and Docker, check out my previous video.

アプリを作成したら、[Container Registry]を選択して、表示されたコマンドをpowershellに打っていくだけです。

Once you've created the app, select [Container Registry], all you have to do is type the command you see into the powershell.

Heroku CLIを使ってログインしたら、[docker ps]を実行してください。

Once you have logged in using the Heroku CLI, run [docker ps].

heroku login
docker ps

[docker desktop]が起動していないと、エラーが表示されるので、その場合は[docker desktop]を起動してください。

If [docker desktop] is not started, an error appears. In that case, start [docker desktop].

[heroku container:login]を実行して、成功したら、デプロイの準備をします。

Run [heroku container:login] and, if successful, prepare for deployment.

heroku container:login


Then create a Dockerfile in the folder where the [wwwroot] folder is located.


Your Dockerfile is very simple. See the previous video for details.

FROM AS base
COPY . .
CMD ASPNETCORE_URLS=http://*:$PORT dotnet your_app_name.Serever.dll


The last line, [CMD], tells the container to execute the instructions written in [CMD] if no argument options are available when the container is executed.


When [*] is set to a URL, the application name can be used as a sub-domain name.


[$PORT] is the port number configured by Heroku.


The last one is the dotnet command you just executed to check the application.

準備ができたら、Docker imageをHerokuにプッシュします。プッシュプッシュ!

When you are ready, push the Docker image into Heroku.

heroku container:push web -a your-heroku-app-name


If we succeed, we will release it as Heroku application.

heroku container:release web -a your-heroku-app-name


Then, as usual, open up two browsers and visit the Heroku app's URL to play with it as you like.


That's all. Thank you for your hard work.