Maison interface Web uni-app Comment déployer Uniapp sur Oss

Comment déployer Uniapp sur Oss

Apr 27, 2023 am 09:06 AM

UniApp est un framework de développement cross-end basé sur Vue.js et la technologie des mini-programmes. Les développeurs peuvent utiliser le même ensemble de code pour le développement sur différentes plates-formes, améliorant considérablement l'efficacité du développement. Une fois le développement terminé, nous devons déployer l'application sur le cloud pour un accès et une utilisation rapides.

Cet article expliquera comment déployer l'application UniApp sur Alibaba Cloud OSS (Object Storage Service) et obtenir un accès en ligne.

1. Introduction à OSS

Alibaba Cloud OSS est un service de stockage cloud hautement fiable et évolutif qui peut réaliser le stockage, la gestion et l'accès en ligne des données. OSS fournit des services de stockage de grande capacité, efficaces et peu coûteux, et prend également en charge divers types d'accès aux données.

2. Packaging UniApp

Avant de déployer l'application UniApp, nous devons la packager sous forme de fichier statique.

  1. Ouvrez le terminal et entrez dans le répertoire racine du projet UniApp.
  2. Exécutez la commande suivante pour empaqueter :
npm run build:h5
Copier après la connexion
  1. Une fois l'empaquetage terminé, un dossier dist sera généré dans le répertoire du projet, qui contient les fichiers statiques de l'application. dist 文件夹,其中包含了应用程序的静态文件。

三、创建 OSS Bucket

  1. 登录阿里云控制台,选择 OSS。
  2. 点击「创建存储空间」。
  3. 在弹出的创建存储空间页面中,按需填写所需参数。选择存储空间类型为「标准存储」。其他选项可以采用默认设置。
  4. 点击「确定」完成创建。创建完成后,在存储空间列表中可以看到新建的存储空间。

四、上传文件到 OSS

  1. 点击存储空间名称,进入存储空间界面。
  2. 选择「文件管理」,在弹出的页面中选择「上传文件」。
  3. 在弹出的「上传文件」页面中,选择刚刚打包好的静态文件夹 dist 中的所有文件,然后点击「上传」按钮。
  4. 上传完成后,可以在文件管理列表中看到上传的文件。

五、配置 Bucket 域名

  1. 点击存储空间名称,进入存储空间界面。
  2. 选择「域名管理」,在页面中可以看到默认的 bucket-name.region.aliyuncs.com
  3. 3. Créez un compartiment OSS
  4. Connectez-vous à la console Alibaba Cloud et sélectionnez OSS.
  5. Cliquez sur "Créer un espace de stockage".
  6. Dans la page pop-up de création d'espace de stockage, renseignez les paramètres requis selon vos besoins. Sélectionnez le type d'espace de stockage comme « Stockage standard ». Les autres options peuvent être laissées à leurs paramètres par défaut.

Cliquez sur "OK" pour terminer la création. Après la création, vous pouvez voir l'espace de stockage nouvellement créé dans la liste des espaces de stockage.

  1. 4. Téléchargez des fichiers sur OSS
  2. Cliquez sur le nom de l'espace de stockage pour accéder à l'interface de l'espace de stockage.

Sélectionnez « Gestion des fichiers » et sélectionnez « Télécharger des fichiers » sur la page contextuelle.

Dans la page contextuelle « Télécharger des fichiers », sélectionnez tous les fichiers dans le dossier statique dist qui vient d'être emballé, puis cliquez sur le bouton « Télécharger ».

🎜Une fois le téléchargement terminé, vous pouvez voir les fichiers téléchargés dans la liste de gestion des fichiers. 🎜🎜🎜5. Configurer le nom de domaine du bucket 🎜🎜🎜Cliquez sur le nom de l'espace de stockage pour accéder à l'interface de l'espace de stockage. 🎜🎜Sélectionnez « Gestion des noms de domaine » et vous pourrez voir le nom de domaine d'accès par défaut au format bucket-name.region.aliyuncs.com sur la page. 🎜🎜Entrez dans la console CDN (si vous n'avez pas encore activé le service, vous devez d'abord l'activer) et sélectionnez « Gestion des noms de domaine » dans la console. 🎜🎜Cliquez sur « Ajouter un nom de domaine », puis suivez les instructions pour créer un nom de domaine personnalisé. 🎜🎜Une fois la création réussie, vous pouvez voir le nom de domaine personnalisé qui vient d'être ajouté dans la liste des noms de domaine. 🎜🎜Liez le nom de domaine personnalisé à l'espace de stockage OSS que vous venez de créer. 🎜🎜🎜7. Test d'accès🎜🎜🎜Entrez le nom de domaine personnalisé dans la barre d'adresse du navigateur (ou utilisez CDN pour accéder au nom de domaine), appuyez sur Entrée, si vous pouvez accéder à l'application UniApp, la configuration est réussie. 🎜🎜En cas de problème d'accès, vous pouvez vérifier si la configuration est incorrecte, ou attendre que le nom de domaine CDN prenne effet. 🎜🎜🎜8. Résumé🎜🎜Cet article explique comment déployer l'application UniApp sur Alibaba Cloud OSS et obtenir un accès en ligne via un nom de domaine personnalisé. De cette manière, les applications peuvent être mises en ligne rapidement et offrir une meilleure expérience d'accès. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser des préprocesseurs (Sass, moins) avec Uni-App? Comment utiliser des préprocesseurs (Sass, moins) avec Uni-App? Mar 18, 2025 pm 12:20 PM

L'article discute de l'utilisation de SASS et moins de préprocesseurs dans UNI-APP, de la configuration de détail, des avantages sociaux et de la double utilisation. L'accent principal est sur la configuration et les avantages. [159 caractères]

Quels sont les différents types de tests que vous pouvez effectuer dans une application UNIAPP? Quels sont les différents types de tests que vous pouvez effectuer dans une application UNIAPP? Mar 27, 2025 pm 04:59 PM

L'article traite de divers types de tests pour les applications UNIAPP, y compris l'unité, l'intégration, les tests fonctionnels, UI / UX, les performances, la plate-forme multiplateforme et la sécurité. Il couvre également une compatibilité multiplateforme et recommande des outils comme JES

Comment utiliser l'API d'animation Uni-App? Comment utiliser l'API d'animation Uni-App? Mar 18, 2025 pm 12:21 PM

L'article explique comment utiliser l'API d'animation d'Uni-App, détaillant les étapes pour créer et appliquer des animations, des fonctions clés et des méthodes pour combiner et contrôler la synchronisation de l'animation. Count de chargement: 159

Comment pouvez-vous réduire la taille de votre package d'application UNIAPP? Comment pouvez-vous réduire la taille de votre package d'application UNIAPP? Mar 27, 2025 pm 04:45 PM

L'article traite des stratégies pour réduire la taille du package UNIAPP, en se concentrant sur l'optimisation du code, la gestion des ressources et les techniques comme le fractionnement du code et le chargement paresseux.

Quels outils de débogage sont disponibles pour le développement UNIAPP? Quels outils de débogage sont disponibles pour le développement UNIAPP? Mar 27, 2025 pm 05:05 PM

L'article traite des outils de débogage et des meilleures pratiques pour le développement de l'UNIAPP, en se concentrant sur des outils comme HBuilderx, WeChat Developer Tools et Chrome Devtools.

Comment utiliser l'API de stockage Uni-App (Uni.SetStorage, Uni.getStorage)? Comment utiliser l'API de stockage Uni-App (Uni.SetStorage, Uni.getStorage)? Mar 18, 2025 pm 12:22 PM

L'article explique comment utiliser les API de stockage Uni-App (Uni.SetStorage, Uni.getStorage) pour la gestion des données locales, discute des meilleures pratiques, dépannage et met en évidence les limitations et les considérations pour une utilisation efficace.

Comment utiliser l'API Uni-App pour accéder aux fonctionnalités des appareils (appareil photo, géolocalisation, etc.)? Comment utiliser l'API Uni-App pour accéder aux fonctionnalités des appareils (appareil photo, géolocalisation, etc.)? Mar 18, 2025 pm 12:06 PM

L'article discute de l'utilisation des API de l'Uni-App pour accéder aux fonctionnalités des appareils comme la caméra et la géolocalisation, y compris les paramètres d'autorisation et la gestion des erreurs. Compte de chargement: 158

Comment pouvez-vous optimiser les images pour les performances Web à UniApp? Comment pouvez-vous optimiser les images pour les performances Web à UniApp? Mar 27, 2025 pm 04:50 PM

L'article discute de l'optimisation des images dans UniaPP pour de meilleures performances Web par compression, conception réactive, chargement paresseux, mise en cache et utilisation du format WebP.

See all articles