前端代碼部署到伺服器

1、webpack打包後的代碼，如何部署到伺服器上

本文章前端代碼是基於vue+webpack開發的

Nginx是一款輕量級的Web 伺服器/反向代理伺服器

首先，webpack配置如下

在開發過程中，我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中，可以運行npm run build進行上線打包

打包完成後，會發現項目中多了dist這個文件夾

執行結果和webpack的配置文件一致。

代碼被webpack打包完成後下一步就是部署到伺服器上，此文僅適合於前端代碼是部署在windows操作系統的nginx服務中。
這里假設：
Windows操作系統：windows server 2008 64位
Nginx服務：nginx-1.12.2 64位

1.下載nginx-1.12.2 64位解壓，假設nginx-1.12.2放在D:nginx-1.12.2目錄中，nginx目錄結構。如圖下

2、前端代碼放在D:nginx-1.12.2html目錄中，dist目錄就是剛剛前端打包完的代碼。如圖下

3、在D:nginx-1.12.2conf目錄中，有個nginx.conf配置文件，進行編輯這個文件

4、假設前端的埠號為8082，如果埠號被佔用，請修改為其它埠號。後台服務訪問地址http://192.168.121.**:8080,

5、打開cmd控制台，進入目錄D:nginx-1.12.2中，用start nginx命令啟動服務，然後用tasklist /fi "imagename eq nginx.exe"，查看nginx服務是否啟動。

4、如果改變配置文件時，需要用nginx -s reload 命令重啟nginx工作進程。

5、關閉服務
nginx -s stop 
nginx -s quit 安全關閉 
taskkill /F /IM nginx.exe > nul 關閉所有nginx服務

2、web前端代碼 小白求教，web前端開發的代碼，是運行在哪裡，是在web伺服器上運行嗎？還是運行在瀏覽器端？

運行在瀏覽器端，如果只是HTML5和js，直接在瀏覽器可以。
如果有後台代碼，就得需要web伺服器，目前主流的是Tomcat伺服器。

3、純html項目需要單獨部署到伺服器嗎？

不管什麼樣的頁面，哪怕只有一個字，想要大家訪問，都必須放到伺服器上，比如你伺服器用的nginx,頁面放到伺服器上，然後在nginx配置文件中指想文件所在目錄，就可以訪問了

4、前端通過gulp編譯後的文件，怎麼部署到伺服器

伺服器上寫部署腳本，從代碼庫里拉項目代碼，跑gulp自動化。或者打包傳給後端讓他搞。

5、如何把做好的前端網頁上傳到伺服器上，讓別人可以像瀏覽百度、新浪等各大網頁一樣可以訪問得到

= =。首先你要有一個公網IP的伺服器(重要，否別人無法直接在網址上訪問你的頁面)

linux 是伺服器，用來24開機提供服務。
apache是引擎，用來提供別人訪問你的網址能有東西出來。
ftp用來把你寫的代碼上傳到linux上面去，有了這一步你的東西才能在伺服器上被別人訪問到。
只要遠程目錄上有你的東西就是上傳成功了，埠默認是21
或者你可以上網買一些虛擬主機，有二級域名可以穿透，也可以外網訪問

6、怎麼把VUE項目部署到伺服器上面

1.使用xshell登錄到阿里雲伺服器。安裝nginx（本文安裝到/etc下）

[plain] view plain copy

cd /etc  

apt-get update  

apt-get install nginx  

2.首先先配置nginx，然後再根據配置文件做下一步操作

打開/etc/nginx/nginx.conf文件

[plain] view plain copy

vim /etc/nginx/nginx.conf  

在nginx.conf中配置如下：

[plain] view plain copy

user www-data;  

worker_processes auto;  

pid /run/nginx.pid;  

events {  

        worker_connections 768;  

        # multi_accept on;  

}  

http {  

        ##  

        # Basic Settings  

        ##  

        tcp_nodelay on;  

        keepalive_timeout 65;  

        types_hash_max_size 2048;  

        # server_tokens off;  

        # server_names_hash_bucket_size 64;  

        # server_name_in_redirect off;  

        include /etc/nginx/mime.types;  

        default_type application/octet-stream;  

        ##  

        # SSL Settings  

        ##  

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE  

        ssl_prefer_server_ciphers on;  

        ##  

        # Logging Settings  

        ##  

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

        error_log /var/log/nginx/error.log;  

        ##  

        # Gzip Settings  

        ##  

        gzip on;  

        gzip_disable "msie6";  

        # gzip_vary on;  

        # gzip_proxied any;  

        # gzip_comp_level 6;  

        # gzip_buffers 16 8k;  

        # gzip_http_version 1.1;  

        ##  

        # Virtual Host Configs  

        ##  

        gzip on;  

        gzip_disable "msie6";  

        # gzip_vary on;  

        # gzip_proxied any;  

        # gzip_comp_level 6;  

        # gzip_buffers 16 8k;  

        # gzip_http_version 1.1;  

        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  

        ##  

        # Virtual Host Configs  

        ##  

        include /etc/nginx/conf.d/*.conf;  

        include /etc/nginx/sites-enabled/*;  

        #以下為我們添加的內容  

       server {               

              listen 80;  

              server_name your-ipaddress;  

              root /home/my-project/;  

              index index.html;  

              location /datas {  

              rewrite ^.+datas/?(.*)$ /$1 break;  

              include uwsgi_params;  

              proxy_pass http://ip:port;  

                              }  

             }  

}  

接下來就根據配置文件進行下一步工作。配置文件中的server_name後面是阿里雲伺服器的ip地址

3.配置文件中的listen是nginx監聽的埠號，所以需要在阿里雲伺服器上為80埠添加安全組規則

在本地的瀏覽器登錄阿里雲伺服器->進入控制台->點擊安全組->點擊配置規則->點擊添加安全組規則，之後配置如下（註：入方向和出方向都要配置）

4.配置文件中的root和index那兩行表示我們把項目文件夾放在/home/my-project下

例如有兩個項目文件夾分別為test1，test2，裡面都有index.html。則目錄結構如下

/home

     |--my-project

            |--test1

                    |--index.html

            |--test2

                    |--index.html

則在瀏覽器輸入http://ip/test1/index.html

伺服器便會在/home/my-project中找到test1下的index.html執行；

如果在瀏覽器中輸入http://ip/test2/index.html

伺服器便會在/home/my-project中找到test2下的index.html執行；

這樣便可以在伺服器下放多個項目文件夾。

5.所以我們也需要在本地項目的config/index.js里的build下進行修改,如果要把項目放到test1下，則

[javascript] view plain copy

assetsPublicPath: '/test1/',  

如果用到了vue-router，則修改/router/index.js

[javascript] view plain copy

export default new Router({  

  base: '/test1/',   //添加這行  

  linkActiveClass: 'active',  

  routes  

});  

6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下

[javascript] view plain copy

const url = '/datas/seller';  

this.$http.get(url).then((response) => {  

  .....  

});  

7.修改後在本地命令行下運行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上傳到伺服器的/home/my-project/test1下，目錄結構如下

/home

     |--my-project

            |--test1

                    |--index.html

                    |--static

8.啟動nginx

[plain] view plain copy

service nginx start  

9.至此項目部署成功，在瀏覽器下輸入:http://ip/test1/index.html即可

7、為什麼我的前端代碼 改了 部署到伺服器 上 微信上沒有改變

每天早上起床都要看一遍「福布斯」富翁排行榜，如果上面沒有我的名字，我就去上班……

8、如何把本地項目部署到伺服器上

把本地項目部署到伺服器上方法比較多，這里以javaee項目為例：

把項目打包成zip，FTP上傳到生產伺服器tomcat的webapps目錄下解壓；

本地修改好的文件，立即FTP上傳到生產伺服器對應的目錄；

生產伺服器安裝svn服務，在本地把修改過的文件commit，然後生產伺服器update。

方式一、簡單直接，但是缺點也很明顯：項目太大上傳太慢，比如改了一個錯別字就要把整個項目打包上傳。

方法二、只上傳修改了的文件，但是有時候改到一半，可能會忘了上傳，長此以往本地和生產伺服器文件的同步就很麻煩了。

方法三、好處是每次部署和改動，都有svn記錄，即使誤刪文件也不怕了。

9、怎麼把 html 網頁發布在阿里雲伺服器上

我們把網站部署到伺服器的時候，首先把域名解析到伺服器，也就是解析到對應的IP地址，然後要弄清楚伺服器是ESC還是虛擬主機，如果是虛擬主機，那我們就不用配置環境，可以直接上傳代碼到對應的目錄就好，設置一下默認主頁，這個在阿里雲官網的控制台可以進行管理。如果是ESC的話，我們就需要根據伺服器的操作系統進行環境配置，就跟我們本地配置是一樣的操作，然後把代碼上傳到配置的目錄就好。希望能幫到你

10、已經寫好了HTML格式的前端文件，想要部署到阿里雲虛擬主機。

ip未綁定網站目錄
虛擬主機一般都會附屬 二級域名 通過域名訪問