linux上部署Flutter web 到Nginx服務(wù)器

筆者的Linux系統(tǒng)是CentOS 7 (Core) 版本,其他版本命令可能略有不同
ps:可以通過下面的命令查看Linux系統(tǒng)版本

cat /etc/os-release

一、部署Nginx服務(wù)步驟

1. 更新系統(tǒng):
在安裝軟件包之前,首先確保系統(tǒng)已更新到最新狀態(tài)。在終端中運(yùn)行以下命令:

sudo yum update

2. 安裝Nginx:
使用以下命令來安裝Nginx:

sudo yum install nginx

按照提示輸入 "y" 確認(rèn)安裝。

3. 啟動Nginx服務(wù):
安裝完成后,啟動Nginx服務(wù)并設(shè)置它在系統(tǒng)啟動時自動啟動:

sudo systemctl start nginx
sudo systemctl enable nginx

# 重啟Nginx服務(wù)
sudo systemctl restart nginx

4. 配置防火墻規(guī)則:(如果已經(jīng)開放了80、443端口則可以跳過該步驟)
如果您啟用了防火墻(FirewallD), 請確保允許HTTP和HTTPS流量:

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

5. 驗(yàn)證Nginx安裝:
打開Web瀏覽器并訪問服務(wù)器的IP地址或域名。如果一切設(shè)置正確,您將看到Nginx默認(rèn)歡迎頁面。

6. (可選)配置Nginx站點(diǎn):
默認(rèn)情況下,Nginx的主配置文件位于 /etc/nginx/nginx.conf,而虛擬主機(jī)配置文件位于 /etc/nginx/conf.d//etc/nginx/sites-available/ 目錄中(具體位置可能因系統(tǒng)配置而異)。您可以編輯這些配置文件來設(shè)置Nginx以服務(wù)特定的網(wǎng)站。

7. (可選)重新加載Nginx配置:
如果您對Nginx的配置文件進(jìn)行了更改,要應(yīng)用更改,可以執(zhí)行以下命令重新加載Nginx配置:

sudo systemctl reload nginx

二、部署Flutter web到Nginx上

要部署Flutter Web應(yīng)用到Nginx服務(wù)器,按照以下步驟操作:

  1. 生成Flutter Web應(yīng)用程序
    首先,確保您已經(jīng)在本地計(jì)算機(jī)上成功生成了Flutter Web應(yīng)用程序。使用以下命令生成Flutter Web應(yīng)用的靜態(tài)文件:

    flutter build web
    

    這將在Flutter項(xiàng)目目錄下的build/web目錄中生成靜態(tài)文件。

  2. 將Flutter Web應(yīng)用程序上傳到服務(wù)器
    將生成的靜態(tài)文件上傳到您的Nginx服務(wù)器??梢允褂霉ぞ呷鏢CP或SFTP,或者將文件打包成壓縮文件,然后使用scprsync命令上傳。

    例如,使用scp命令上傳到服務(wù)器:

    scp -r /path/to/your/flutter/app/build/web user@server_ip:/usr/share/nginx/html/web
    

    這將把Flutter Web應(yīng)用的靜態(tài)文件上傳到Nginx的HTML根目錄中。

PS:

  • '/usr/share/nginx/html/web'是'Nginx'的靜態(tài)資源位置可以在'nginx.conf'中配置后面會講
  • 如果服務(wù)器是通過堡壘機(jī)訪問的,需要先登錄堡壘機(jī)使用堡壘機(jī)的文件傳輸功能把打包好的web傳到服務(wù)器上
  1. 配置Nginx
    在Nginx上配置虛擬主機(jī)(如果尚未配置)。在Nginx配置文件中,您需要添加一個服務(wù)器塊,以指定Web應(yīng)用程序的根目錄和其他相關(guān)配置。例如:

    server {
        listen       80 default_server;  #80是http的端口,443是https的端口
        server_name  _; # 使用下劃線來匹配任何主機(jī)名或IP地址
    
        location / {
            root /usr/share/nginx/html/web; #nginx靜態(tài)資源根目錄
             # 如果請求的文件不存在,將請求傳遞給index.html
            try_files $uri $uri/ /index.html;
        }
    
        # 可以根據(jù)需要配置其他選項(xiàng),如SSL等
    }
    

在上述配置中:

  • 可以把 _ 替換為您的域名或服務(wù)器IP地址。
  • root 指令定義了Nginx應(yīng)該在哪里查找靜態(tài)資源文件。
  • 使用以下命令測試Nginx配置是否正確:
    sudo nginx -t
    
  1. 重新加載Nginx配置
    當(dāng)您完成配置后,使用以下命令重新加載Nginx配置以使更改生效:

    sudo nginx -s reload
    
  2. 訪問Flutter Web應(yīng)用
    Flutter Web應(yīng)用程序現(xiàn)在應(yīng)該已經(jīng)部署到Nginx服務(wù)器上,并且可以通過瀏覽器訪問。使用服務(wù)器的域名或IP地址訪問應(yīng)用程序,例如:

    http://your_ip:80/index.html
    

    能夠在瀏覽器中看到Flutter Web應(yīng)用程序。

PS:
nginx配置文件路徑:

/etc/nginx/nginx.conf

修改配置:

vim /etc/nginx/nginx.conf

修改完后需要重新加載配置執(zhí)行

sudo nginx -s reload

nginx靜態(tài)資源位置:

/usr/share/nginx/html/web
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容