Menerapkan SvelteKit aplikasi untuk Amplify Hosting - AWS Amplify Hosting

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menerapkan SvelteKit aplikasi untuk Amplify Hosting

Gunakan petunjuk berikut untuk menyebarkan SvelteKit aplikasi ke Amplify Hosting. Anda dapat menggunakan aplikasi Anda sendiri, atau membuat aplikasi pemula. Untuk informasi selengkapnya, lihat Membuat proyek dalam SvelteKit dokumentasi.

Untuk menerapkan SvelteKit aplikasi SSR ke Amplify Hosting, Anda harus menambahkan adaptor ke project Anda. Kami tidak memelihara adaptor yang dimiliki Amplify untuk kerangka kerja. SvelteKit Dalam contoh ini, kami menggunakan yang amplify-adapter dibuat oleh anggota komunitas. Adaptor tersedia di github.com/gzimbron/amplify-adapter di situs web. GitHub AWS tidak mempertahankan adaptor ini.

Untuk menerapkan SvelteKit aplikasi ke Amplify Hosting

  1. Di komputer lokal Anda, navigasikan ke SvelteKit aplikasi untuk menyebarkan.

  2. Untuk menginstal adaptor, buka jendela terminal dan jalankan perintah berikut. Contoh ini menggunakan adaptor komunitas yang tersedia di github.com/gzimbron/amplify-adapter. Jika Anda menggunakan adaptor komunitas yang berbeda, ganti amplify-adapter dengan nama adaptor Anda.

    npm install amplify-adapter

  3. Di folder project untuk SvelteKit aplikasi Anda, buka svelte.config.js file tersebut. Edit file untuk menggunakan amplify-adapter atau mengganti 'amplify-adapter' dengan nama adaptor Anda. File akan terlihat seperti berikut ini.

    import adapter from 'amplify-adapter';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

              
/** @type {import('@sveltejs/kit').Config} */
const config = {
        // Consult https://kit.svelte.dev/docs/integrations#preprocessors
        // for more information about preprocessors
        preprocess: vitePreprocess(),

        kit: {
                // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
                // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
                // See https://kit.svelte.dev/docs/adapters for more information about adapters.
                adapter: adapter()
        }
};

export default config;

  4. Komit perubahan dan dorong aplikasi ke repositori Git Anda.

  5. Sekarang Anda siap untuk menerapkan SvelteKit aplikasi Anda ke Amplify.

    Masuk ke AWS Management Console dan buka konsol Amplify.

  6. Pada halaman Semua aplikasi, pilih Buat aplikasi baru.

  7. Pada halaman Mulai membangun dengan Amplify, pilih penyedia repositori Git Anda, lalu pilih Berikutnya.

  8. Di halaman Tambahkan cabang repositori, lakukan langkah berikut:

    1. Pilih nama repositori untuk terhubung.

    2. Pilih nama cabang repositori untuk terhubung.

    3. Pilih Berikutnya.

  9. Di halaman Pengaturan aplikasi, cari bagian Pengaturan build. Untuk direktori keluaran Build, masukkanbuild.

  10. Anda juga harus memperbarui perintah build frontend aplikasi dalam spesifikasi build. Untuk membuka spesifikasi build, pilih Edit YML file.

  11. Dalam amplify.yml file, cari bagian perintah build frontend. Masuk - cd build/compute/default/ dan- npm i --production.

    File setelan build Anda akan terlihat seperti berikut ini.

    version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - 'npm run build'
                - 'cd build/compute/default/'
                - 'npm i --production'
              
    artifacts:
        baseDirectory: build
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'

  12. Pilih Simpan.

  13. Jika Anda ingin Amplify dapat mengirimkan log aplikasi ke Amazon CloudWatch Logs, Anda harus mengaktifkannya secara eksplisit di konsol. Buka bagian Pengaturan lanjutan, lalu pilih Aktifkan log SSR aplikasi di bagian penyebaran Rendering Sisi Server () SSR.

  14. Pilih Berikutnya.

  15. Di halaman Tinjauan, pilih Simpan dan deploy.