成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

手把手搭建nginx服務(wù)器,部署前端代碼

CNZPH / 3084人閱讀

摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。

第一步: 下載 nginx

nginx download官網(wǎng)地址

下載后,將其解壓到 本地的任一目錄下。

此時(shí)我們可以看到有如下目錄:

html路徑下放置我們前端 build好的代碼(如何build,相信各位都會(huì)),conf下有個(gè)非常重要的文件nginx.conf,用來(lái)配置nginx服務(wù)器。

第二步: 配置nginx服務(wù)器

打開(kāi)nginx.conf文件,直接找到配置server 的地方,取消掉暫時(shí)用不到的配置,下面便是我的配置:

server {
        # 啟動(dòng)后的端口
        listen       8880;   
        
        # 啟動(dòng)時(shí)的地址
        server_name  localhost;

        # 啟動(dòng)后,地址欄輸入: localhost:8880, 默認(rèn)會(huì)在html文件夾下找 index.html文件
        location / {
            root   html;
            index  index.html; 
        }
        
        # 404頁(yè)面配置,頁(yè)面同樣在html文件夾中
        error_page  404    /404.html;
        location = /404.html {
            root   html;
        }
        

        # 其他錯(cuò)誤碼頁(yè)面配置
        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


        # 配置代理。由于項(xiàng)目是在本地起動(dòng)的,而我們的request需要請(qǐng)求其他ip地址。如果你的request鏈接為localhost:8880/abc/login?name=12345,那么下面配的就是location /abc
        location /api {
           proxy_pass   http://192.168.0.0:80;       
        }

        # 一把前端不管用vue,還是react等框架,默認(rèn)都是單頁(yè)面的,如果你的項(xiàng)目是多頁(yè)面的,則需要用到下面的配置。
        # 因?yàn)榇藭r(shí)你的瀏覽器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login
        # 所以我們需要將路徑中a.html指向具體的html文件夾中的文件,因?yàn)槟J(rèn)是index.html
        location /a.html {
          alias html;
          index a.html;
        }
        location /b.html{
          alias html;
          index b.html;
        }
}
第三步: 將build好的內(nèi)容放到nginx下的html文件夾下

只需要dist下的內(nèi)容,如

第四步: 啟動(dòng)nginx服務(wù)器



路徑下右鍵,打開(kāi)命令號(hào)工具,并輸入

>start nginx

然后在瀏覽器地址欄輸入

localhost:8880

即可

第五步: 停止nginx服務(wù)器
>nginx -s stop
注意事項(xiàng)

1、在修改nginx.conf文件時(shí),每行的末尾必須帶有分好";",否則會(huì)報(bào)錯(cuò)。
2、有些命令行工具在執(zhí)行start nginx后,一閃而過(guò),所以你并不知道到底啟動(dòng)了還是沒(méi)有,可以運(yùn)行下面的命令:

tasklist /fi "imagename eq nginx.exe"

結(jié)果類(lèi)似于這樣

3、如果你運(yùn)行nginx -s stop命令后,再次運(yùn)行tasklist /fi "imagename eq nginx.exe"命令發(fā)現(xiàn)還是有進(jìn)程,并沒(méi)有停止,可以訪(fǎng)問(wèn)任務(wù)管理器,然后結(jié)束進(jìn)程

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/101179.html

相關(guān)文章

  • 把手搭建nginx務(wù)器部署前端代碼

    摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。 第一步: 下載 nginx nginx download官網(wǎng)地址 下載后,將其解壓到 本地的任一目錄下。 此時(shí)我們可以看到有如下目錄:showImg(https://segmentfault.com/img/bVbnrba?w=158&h=152); html路徑下放置我們前...

    Wuv1Up 評(píng)論0 收藏0
  • 把手搭建nginx務(wù)器,部署前端代碼

    摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。 第一步: 下載 nginx nginx download官網(wǎng)地址 下載后,將其解壓到 本地的任一目錄下。 此時(shí)我們可以看到有如下目錄:showImg(https://segmentfault.com/img/bVbnrba?w=158&h=152); html路徑下放置我們前...

    YancyYe 評(píng)論0 收藏0
  • 把手搭建nginx務(wù)器部署前端代碼

    摘要:此時(shí)我們可以看到有如下目錄路徑下放置我們前端好的代碼如何,相信各位都會(huì),下有個(gè)非常重要的文件,用來(lái)配置服務(wù)器。 第一步: 下載 nginx nginx download官網(wǎng)地址 下載后,將其解壓到 本地的任一目錄下。 此時(shí)我們可以看到有如下目錄:showImg(https://segmentfault.com/img/bVbnrba?w=158&h=152); html路徑下放置我們前...

    littleGrow 評(píng)論0 收藏0
  • Nginx

    摘要:此外,其也能夠提供強(qiáng)大的反向代理功能。是由為俄羅斯訪(fǎng)問(wèn)量第二的站點(diǎn)開(kāi)發(fā)的,第一個(gè)公開(kāi)版本發(fā)布于年月日。 keepalived+nginx 實(shí)現(xiàn)高可用雙機(jī)熱備 + 負(fù)載均衡架構(gòu) 1 準(zhǔn)備4個(gè)ubuntu16.04虛擬機(jī)(啟用網(wǎng)卡二并使用橋接模式):A服務(wù)器:192.168.0.103 主B服務(wù)器:192.168.0.104 主(備) 前端工程師學(xué)習(xí) Nginx ...

    syoya 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<