View a markdown version of this page

Menyebarkan SvelteKit aplikasi ke 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.

Menyebarkan SvelteKit aplikasi ke Amplify Hosting

Gunakan petunjuk berikut untuk menerapkan 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 menyebarkan SvelteKit aplikasi dengan SSR ke Amplify Hosting, Anda harus menambahkan adaptor ke proyek Anda. Kami tidak memelihara adaptor milik Amplify untuk SvelteKit kerangka kerja. Dalam contoh ini, kita 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 menyebarkan SvelteKit aplikasi ke Amplify Hosting

  1. Di komputer lokal Anda, navigasikan ke SvelteKit aplikasi yang akan digunakan.

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

    npm install amplify-adapter

  3. Di folder proyek untuk SvelteKit aplikasi Anda, buka svelte.config.js file. Edit file untuk menggunakan amplify-adapter atau ganti '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. Lakukan perubahan dan dorong aplikasi ke repositori Git Anda.

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

    Masuk ke Konsol Manajemen AWS dan buka konsol https://console.aws.amazon.com/amplify/ Amplify.

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

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

  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. Pada halaman Pengaturan aplikasi, cari bagian Peng aturan Bangun. Untuk Build output direktori masukkanbuild.

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

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

    File pengaturan 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 Peng aturan lanjutan, lalu pilih Aktifkan log aplikasi SSR di bagian penyebaran Server-Side Rendering (SSR).

  14. Pilih Berikutnya.

  15. Di halaman Tinjauan, pilih Simpan dan deploy.