如何把程序發布到伺服器

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

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

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

首先，webpack配置如下

在開發過程中，則指我們是通過npmrundev在開發環境中運行代碼

如果要部署到生產環境中，可以運行npmrunbuild進行上線打包

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

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

代碼被webpack打包完成後下一步就是部署到伺服器上，此文僅適合於前端代碼是部署在windows操作系統的nginx服務中。

這里假設：

Windows操作系統：windowsserver200864位

Nginx服務：nginx-1.12.264位

1.下載nginx-1.12.264位解壓，假設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，如果埠號被佔用，請修改為其它埠號。後台服務訪問地址.**:8080,

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

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

5、關閉服務

nginx-sstop?

nginx-squit安全關閉?

taskkill/F/IMnginx.exenul關閉所有nginx服務

後台的部署需要分為前端與後端的部署，對於前端的部署，需要我們在對代碼進行打包後，放到我們的伺服器上，對於打包的操作，我以我使用的niua框架進行舉例，首先在窗口頁面進行打包，

使用代碼：npmrunbuild--prod對前端進行打包

然後褲慎在伺服器上的使用位置進行部署運行。

然後就是對於後台代碼的打包

我們可以直接使用idea的maven插件打包好後可以直接使用

在這里插入圖片描述

2、前台的部署

由於我們使用的是微信小程序模擬工具，在進行調試沒有問題之後，可以然後在確定appid沒有問題之後，胡虧敬使用模擬工具里的上傳按鈕就可以上傳版本。

然後到微信公眾平台上對使用的外部介面進行設空旅置然後發行。

文章知識點與官方知識檔案匹配

小程序技能樹首頁概覽

3838人正在系統學習中

執行成功後亂攜會生成dist文件

4.1進入到nginx配置目錄：/usr/local/nginx/conf,對nginx.conf文件進行配置

使用include可以配置多個.conf文件，如一個項目一個配置文件。在同目錄下創建demo文件夾，並創建demo.conf配置文件

下面使用是以ip地址的方式創建的的配置文件

訪問地址：

其中dist名稱時可以修改，保持與/usr/local/nginx/html下cp名稱寬粗一致，否則會訪問不到;並且/usr/local/nginx/html目錄可存在同一ip下多個web項目。

域名與ip綁定

配置域名demo.conf

eg:域名-demo.cn

4.2阿里雲配置域慎陪鎮名前綴

阿里雲-域名-域名列表—域名管理-域名解析-解析設置

如圖：記錄值填寫當前服務ip

學習過程中所記錄，有問題或者有好的方式歡迎指點。不勝感激???

vue在服務端部署時，我們都知道通過npmrunbuild指令打包好的dist文件，通過http指定是可以直接瀏覽的，Thinkphp通肢局如過域名指向index.php文件才可以瀏覽。要使前端正常調用後端數據，有兩種方法：1、前端跨域調用後端數據，2、前端打包文件部署在後端的伺服器文件夾下（同域）。

web伺服器：apache

一、跨域

在伺服器配置站點：

在路徑/home/www/??下創建test項目文件夾，用來放項目文件。??

找到httpd-vhosts.conf文件配置站點??

前端站點：??

????ServerName?test.test.com??

????DocumentRoot?"/home/www/test/dist"????

????DirectoryIndex?index.html??

後端站點：??

????ServerName?test.testphp.com??

????DocumentRoot?"/home/www/test/php"????

????DirectoryIndex?index.php??

將前端打包歷啟好的dist文件放在/home/www/test/文件夾下，運行可瀏覽，當路徑改變時，刷新會出現404錯誤。此時dist文件下創建一個.htaccess文件，當路徑不存在時，路徑指向能解決此問題。

??RewriteEngine?On??

??RewriteBase?/??

??RewriteRule?^index.html$?-?[L]??

??RewriteCond?%{REQUEST_FILENAME}?!-f??

??RewriteCond?%{REQUEST_FILENAME}?!-d??

??RewriteRule?.?/index.html?[L]??

在/home/www/test文件夾下創建項目根目錄php文件夾，將thinkphp文件放在php下。TP5的入口文件在public文件下，在這將public下的入口文件index.php挪到php文件夾下（個人習慣將入口文件放在項目根目錄）,後端綁定Index模塊。

前端調用後端介面，存在跨域，跨域解決方法有好幾種，在這我將在後端php做配置，解決跨域問題，在公用控制器設置跨域配置：

class?Common?extends?Controller??

{??

????public?$param;??

????//?設置跨域訪問??

????public?function?_initialize()??

????{??

????????parent::_initialize();??

????????isset($_SERVER['HTTP_ORIGIN'])???header('Access-Control-Allow-Origin:?'.$_SERVER['HTTP_ORIGIN'])?:?'臘凱'??

????????header('Access-Control-Allow-Credentials:?true');??

????????header('Access-Control-Allow-Methods:?GET,?POST,?PUT,?DELETE,?OPTIONS');??

????????header("Access-Control-Allow-Headers:?Origin,?X-Requested-With,?Content-Type,?Accept,?authKey,?sessionId");??

$param?=??Request::instance()-param();??

$this-param?=?$param;??

????}??

}??

前端調用登錄介面：this.axios.post('',{user:'',password:''})。

(可在webpack.base.conf.js文件下可定義介面：)

二、同域

後端配置同上，公共配置器中的header配置注釋。將前端的dist文件下的所有文件（包含.htaccess），放在php文件夾下。將後端index控制器的index方法的路徑重定向php下的index.html文件：

namespace?appindexcontroller;??

use?thinkController;??

class?Index?extends?Controller??

{??

????public?function?index()?{??

$this-redirect('/index.html');??

????}??

}??

前端調用登錄介面：this.axios.post('/index.php/base/login',{user:'',password:''})

轉自：

⑷ 前端的代碼怎麼部署到伺服器

1、微信小程序前端就是在微信內部顯示。後台在本地開發即可，有很多成熟的後台，不需要你開發的。

2、一個前端頁面，在本地直接打開就能訪問。另外如果是要放到伺服器下的話，可以裝個nginx，或者apache，或者tomcat，直接放到網頁路徑下，就行。

3、後端開發，根據原型圖製作系統後台和開發相關介面，包括後台數據管理、和小程序前台交互的介面。小程序介面需要使用HTTPS，也就是伺服器必須按照SSL證書，同時需要加入相關域名到管理後台。

4、如果您的小程序需要更換伺服器，需要按照以下步驟進行操作：在新伺服器上進行部署，並確保該伺服器支持小程序的開發和運行環境。將小程序的域名解析到新伺服器的IP地址。

5、然後點擊，翻譯器英文，把這備州斗個小程序添加到，我的小程序里，方便跡高以後使用。

6、小程序UI設滾譽物計根據前期的策劃原型圖，需要設計出小程序的頁面。小程序的設計主要考慮用戶體驗度，突出重點，流程明確、導航流暢、載入頁面等等。