おい、開発者

新しい記事に戻ってください.本稿では、我々のブリッツを展開することを学びます.Vercelへのjsアプリケーション.
では、始めましょう.

ビルドアプリ

このチュートリアルでは、電撃を展開します.我々はすでに構築したJSアプリ.前のブリッツの記事で.jsあなたはこれらの記事をここから読むことができます.

第1部

第2部

Part 3 :

展開のために、我々は我々のブリッツアプリの生産ビルドを作成し、いくつかのエラーが発生するかどうかをテストする必要があります.これは次のコマンドを実行します.

yarn build

あなたが人々に沿って私を追っているならば、君たちは以下のエラーを得ます.

このエラーを取り除くには、{/* @ts-ignore */} ちょうどこのエラーが起こった線の上に.

// app/pages/projects/[projectId]/tasks/index.tsx
...
        {tasks.map((task) => (
          <li key={task.id}>
            {/* @ts-ignore */}
            <CustomLink href={Routes.ShowTaskPage({ projectId, taskId: task.id })}>
              <a>{task.name}</a>
            </CustomLink>
          </li>
        ))}
...

もう一度走るyarn build , さて、別のエラーを得るでしょう.

このためには、// @ts-ignore ちょうどこのエラーが起こった線の上に.

// app/pages/projects/[projectId]/edit.tsx
        <ProjectForm
          submitText="Update Project"
          // TODO use a zod schema for form validation
          //  - Tip: extract mutation's schema into a shared `validations.ts` file and
          //         then import and use it here
          // schema={UpdateProject}
          initialValues={project}
          onSubmit={async (values) => {
            try {
              const updated = await updateProjectMutation({
                id: project.id,
                ...values,
              })
              // @ts-ignore
              await setQueryData(updated)
              router.push(Routes.ShowProjectPage({ projectId: updated.id }))
            } catch (error) {
              console.error(error)
              return {
                [FORM_ERROR]: error.toString(),
              }
            }
          }}
        />

今、すべてのエラーは、現在実行することができますが解決されているyarn build . さあ、うまくいきます.次に、コマンドを書くことができますyarn start ビルドをlocalhostで提供する.

データベース

Vercelはサーバレスプラットフォームであるため、ユーザーにデータベースを提供しません.それで、我々は別々に我々のデータベースを主催しなければなりません.
このプロジェクトでは、supabase Postgresデータベースを使用します.
supabase Postgresデータベースを使用するには、https://supabase.io そして、あなたのアカウントを作成します.
その後、Subabaseダッシュボードで新しい組織を作成し、新しいプロジェクトを作成します.
%https://youtu.be/dBOSUER_5T4?list=TLGGNnD3VLhx5_MyNDA4MjAyMQ ]

While creating a project, select a nearby location to Washington DC because, by default, Vercel apps are deployed to the Washington DC server.

あなたのsupabaseプロジェクトの準備が整いましたSettings -> Database 接続文字列をコピーします.を追加し、.env.local and .env.test.local を使用して、DBRIGHT URL値を置き換えるConnection string , パスワードをパスワードで置き換えます.プロジェクトの作成中に追加されます.
置換provider = "sqlite" with provider = "postgres" インdb/schema.prisma .

// .env.local

DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.ntmdsyxmousbonsypexq.supabase.co:5432/postgres"

// db/schema.prisma

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")
}

これを追加したら、移行を削除しますDB/移行.
実行:
blitz prisma migrate dev


With this command, we have also created tables in the database.

Now, if you go to app.supabase.io プロジェクトをクリックしてTable Editor . これでテーブルが作成されたことがわかります.

今、もう一度実行yarn build and yarn start あなたのアプリケーションがうまく動作しないかどうかをテストします.
それが働いているならば、もう一つのステップに入りましょう.

ギトゥブへ

我々は我々のコードをGithub Repoにプッシュするつもりです.なぜなら、Vercelに展開するとき、我々のGithub Repoを接続するならば、Vercelは新しいコミットを押すたびに、自動的にコードを展開します.
しかし、前に、レポを作成し、それを押すと、我々はいくつかの変更を行う必要があります.我々がコミットを押すときはいつでも、電撃テスト(ハスキーを使用して).このチュートリアルでテストを行っていないので、Huskyにプッシュする前にテストを実行しないように伝えなければなりません.
そのためには.husky/pre-push コメントnpm run test `

！ビン/ sh

. "$(dirname "$0")/_/husky.sh"

npx tsc
npm run lint

NPM走行試験

`

Go to https://github.com そして、あなたのアカウントにログインし、新しいレポを作成します.

repoが作成された後、指示はGitHub 地元のレポをプッシュするにはGitHub .
または、プロジェクトのルートフォルダーで次のコマンドを実行します.
git add .
git commit -m "Created Blitz.js app"
git branch -M main
git remote add origin [YOUR_REPO_URL]
git push -u origin main


Now, our code is on GitHub.

GitHub Link: https://github.com/projectashik/blitzjs-projectmanagement

展開する

I am assuming that you already have a Vercel account.

To deploy to Vercel, go to https://vercel.com and click on New project .

最近プッシュされたrepoのインポートをクリックします.( Githubアカウントを最初に接続しなければならないかもしれません)

あなたがチームを持っているか、チームを作成したいならば、あなたはそうすることができます.

それからConfigure Project セクションでは、プロジェクトの名前を付けます.
追加DATABASE_URL を設定し、SESSION_SECRET_KEY 変数`環境変数の32文字のランダム文字列.

Protip: You can create random 32 characters string by the following command:

node -e "console.log(crypto.randomBytes(32).toString('hex'))"

次に、展開をクリックします.
今では、我々のアプリケーションを展開します.

今、我々のアプリケーションはライブです:
https://blitzjs-projectmanagement.vercel.app/
閉じるこの動画はお気に入りから削除されています.してください、私の仕事のためのあなたのフィードバックをコメントダウンし、また、任意の問題に直面した場合、コメントダウン.