記錄--原來前端部署這麼簡單

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

有個朋友說前端技能大家大部分都會，就是部署項目這一塊經驗都比較稀缺，一直很想學一下。所以在這裡寫一篇簡單的從零開始部署前端項目的全過程，感興趣的掘友們或者想自己搭建項目部署的可以看一下這篇。

環境搭建

首先我們需要進行環境搭建主要就是伺服器和nginx配置。

伺服器

如果有伺服器的直接可以通過遠程工具遠程到伺服器（有伺服器的可以 跳到前端資源 那一步開始閱讀），我自己本身是用 xshell 軟體進行遠程連接的，挺好用的。 若沒有伺服器的可以通過 VMWare軟體 搭建一個虛擬機來實現，想實踐的可以去 VMWare 官網下載一個可以試用一個月的，下載完之後還需要一個鏡像文件，我下載的是 centos，具體下載流程可以參照這個。

下載完之後就可以去VMWare 新建虛擬機，然後就是傻瓜式下一步，遇到下麵的界面，選擇對應的iso鏡像文件的路徑即可，遇到設置用戶名和密碼的界面，要記得用戶名和密碼，後面要用到，之後就是一直下一步到完成。

 安裝完之後在左邊的tab會出現對應安裝好的虛擬機，這個時候啟動即可

 若是啟動的過程中出現彈框報錯 VMware提示此主機支持Intel VT-x但Intel VT-x處於禁用狀態，大概率是BIOS設置的某一項為disable，所以大家需要自己的電腦進入bios設置，開啟對應的選項並保存重啟。

遠程連接

這個步驟有伺服器的可以直接跳過，有了伺服器之後我們就可以先與伺服器建立連接，這樣後續操作部署之類的也會比較方便。

首先打開虛擬機的虛擬網路編輯器，位置如下

 打開主機的命令行，查詢ip配置，進行網路配置，要特別註意子網IP中網段要與本地電腦的網段必須保持一致

 網關IP中網段必須要與本地電腦的預設網關的網段保持一致

 上述配置完之後，就是右鍵虛擬機->設置->選擇第2步中設置了Nat模式的網卡

 然後就可以打開虛擬機的命令行，然後查看一下ip（輸入命令 ifcofig）

 然後就可以根據ip進行連接，我是通過xftp進行連接，用戶名得用root這是預設超級管理員的用戶名(因為後續部署前端項目需要該許可權)，密碼則是最開始配置虛擬機設置的密碼，然後就遠程成功了

前端資源

可以遠程之後我們就可以直接將打包好的前端資源部署到伺服器，以我為例，通過xftp將dist上傳到伺服器的路徑/var/www/test

這個時候我們在我們的主機，瀏覽器訪問遠程ip，發現什麼也沒有

這是為什麼？

因為我們沒有進行nginx的映射，所以需要安裝nginx

Nginx配置

執行以下命令安裝nginx

sudo yum install epel-release
sudo yum install nginx

sudo systemctl start nginx

啟動完之後我們需要更改配置文件，配置文件路徑在 etc/nginx/nginx.conf，主要配置是location，路徑配置對應的前端項目路徑，我們需要將其映射到我們的前端資源

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  localhost;

        location / {
            root   /var/www/test/;
            index  index.html index.htm;
        }
        

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

}

修改完之後重啟nginx

sudo systemctl restart nginx

本文轉載於:

https://juejin.cn/post/7294841029681315855

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。