uniapp をサーバーにデプロイし、h5 を使用してアクセスする方法-uni-app-php.cn

ステップ 1: アプリケーションをパッケージ化する

ステップ 2: サーバーにアップロードする

ステップ 3: アプリケーションをテストする

ホームページ

ウェブフロントエンド

uni-app

uniapp をサーバーにデプロイし、h5 を使用してアクセスする方法

PHPz

Apr 17, 2023 am 11:28 AM

インターネット技術の継続的な発展に伴い、フロントエンド開発に携わる人々がますます増えています。フロントエンドテクノロジの継続的な更新により、ますます多くのアプリケーションがいくつかの新しいテクノロジを使用し始めています。中でもUniAppは、Android、iOS、H5向けのアプリを一度に開発できる、現在人気のクロスプラットフォームアプリ開発フレームワークです。

UniApp を使用してアプリケーションを開発する場合、プロフェッショナル向けの開発ツールである HBuilder X を使用することで、プロジェクトの作成、管理、公開を簡単に行うことができます。開発が完了したら、ユーザーが H5 経由でアプリケーションにアクセスできるように、プロジェクトをサーバーにデプロイする必要があります。

UniApp アプリケーションをサーバーにデプロイし、H5 経由でアクセスする方法を見てみましょう。

ステップ 1: アプリケーションをパッケージ化する

デプロイメントの前に、アプリケーションをパッケージ化する必要があります。 HBuilder Xでは、メニューの「リリース」を選択するか、ショートカットキー「Ctrl Shift E」を直接使用してパッケージ化できます。アプリケーションのニーズに応じて、APK 形式または H5 Web ページ形式でパッケージ化することを選択できます。ここでは、H5 Web ページ形式にパッケージ化する必要があります。パッケージ化には「H5」オプションを選択できます。パッケージ化が成功すると、サーバーにデプロイするコンテンツである「dist」フォルダーを取得します。

ステップ 2: サーバーにアップロードする

次に、パッケージ化された「dist」フォルダーをサーバーにアップロードする必要があります。 FTP ツールを使用してフォルダーをサーバーにアップロードすることも、Git 管理ツールを使用してコードをサーバーにアップロードしてデプロイすることもできます。

サーバーが Apache または Nginx を使用して展開されている場合は、サーバーの Web サイトのルートディレクトリに「dist」フォルダーを配置できます。 Apache を使用してデプロイしている場合は、以下に示すように、Apache 構成ファイルにいくつかの構成を追加する必要があります。

<VirtualHost *:80> 
    ServerAdmin admin@example.com 
    DocumentRoot /var/www/html/dist 
    ServerName example.com 
    <Directory /var/www/html/dist> 
        Options Indexes FollowSymLinks MultiViews 
        AllowOverride All 
        Order allow,deny 
        allow from all 
    </Directory> 
</VirtualHost>

ログイン後にコピー

Nginx を使用してデプロイしている場合は、Nginx 構成ファイルにいくつかの構成を追加する必要があります。以下に示す:

server { 
    listen 80; 
    server_name example.com; 
    root /var/www/html/dist; 
    index index.html; 
    location / { 
        try_files $uri $uri/ /index.html; 
    } 
}

ログイン後にコピー

これらの構成は、サーバー構成に応じて調整されます。構成が完了したら、Apache または Nginx を起動し、サーバーの IP アドレスまたはドメイン名にアクセスしてアプリケーションにアクセスできます。