Published Date : 2020年11月1日15:26
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
前回作成したBlazorのアプリをHerokuにアップしてみましょう。
Let's upload the Blazor application we created last time to Heroku.
まず前準備としてBlazorのアプリをpublishします。
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
成功したら、適当なブラウザを立ち上げて、検索窓に[localhost:5000]と入力して挙動を確かめてください。
If successful, try launching the appropriate browser and typing [localhost:5000] in the search window to see what happens.
次にHerokuにログインして新しいアプリを作ってください。
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
そうしたら、先ほどの[wwwroot]フォルダがあるフォルダ内にDockerfileを作成してください。
Then create a Dockerfile in the folder where the [wwwroot] folder is located.
作成したDockerfileはとてもシンプルです。詳細は前の動画を参照してください。
Your Dockerfile is very simple. See the previous video for details.
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base WORKDIR /app COPY . . CMD ASPNETCORE_URLS=http://*:$PORT dotnet your_app_name.Serever.dll
最後の行の[CMD]は、コンテナ実行時に引数のオプションがなければその[CMD]で書いた命令を実行するように動きます。
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.
[＊]をURLに設定すると、アプリ名をサブドメイン名として利用できます。
When [*] is set to a URL, the application name can be used as a sub-domain name.
[$PORT]はHerokuが設定するポート番号です。
[$PORT] is the port number configured by Heroku.
その後は先ほど実行したdotnetコマンドです。
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
成功したら、Herokuのアプリとしてリリースします。
If we succeed, we will release it as Heroku application.
heroku container:release web -a your-heroku-app-name
後はいつものように二つブラウザを立ち上げて、HerokuアプリのURLにアクセスして好きなように遊んでみてください。
Then, as usual, open up two browsers and visit the Heroku app's URL to play with it as you like.
https://your-heroku-app-name.herokuapp.com/
以上です。お疲れ様です。
That's all. Thank you for your hard work.