自九月底開始有想嘗試架設網站的念頭

歷經10天的跌跌撞撞

總算成功架設屬於自己的網站

本篇為記錄這一路阻難至架設成功的過程

 

一、開發環境與新專案

1.1檢查環境

使用Visual Studio 2019為新專案的平台

首先先確認ASP.NET與網頁程式開發有勾起來並安裝

(因為我已經安裝完,所以右下角的所需空間為0,印象中單勾起此選項,應該所需3GB左右)

image

1.2開新專案

image

我這次的目標不是.Net Core,所以仍然使用ASP.Net Web應用程式(.Net Framework)

此一步驟請先確認篩選器有僅限C#語言,因為.Net Framework另有VB版本

開錯就只能重開新專案

image

P.S. .Net Framework當前最新為4.8,不過4.5.2以後似乎沒有看到什麼差異,我的電腦預設4.6.1,我就沒動了

image

進入此畫面後請先不要急著建立,先到驗證裡面變更選項

image

預設為「無驗證」,我會切換到「個別使用者帳戶」,作用是讓專案可以自動生產使用者登入機制(如下圖)

image

使用「個別使用者帳戶」,在預設的首頁右上角可以看到有登入註冊的機制,而若是使用「無驗證」則沒有

image

 

確認變更驗證後,再建立MVC專案

建立後執行IIS Express就可以看到上一張圖的預設首頁了,一個新專案建立完成

image

二、MySQL

2.1安裝MySQL

下載MySQL的Workbench 8.0 CE ,以下是Oracle的官方下載地址

https://dev.mysql.com/downloads/

我選擇MySQL Installer for Windows,點選後再登入Oracle帳戶即可下載

image

如果沒有Oracle帳戶,可以直接從下方取得離線安裝版的檔案:

https://dev.mysql.com/get/Downloads/MySQLInstaller/mysql-installer-community-8.0.21.0.msi

一路下一步就可以了,遇到沒有安裝的就Execute讓安裝精靈幫你把補丁打一打

安裝好後啟動MySQL Workbench 8.0 CE

對著自己的本地資料庫按右鍵,選擇Copy Connection String to Clipboard

會得到"root@localhost:3306"的字串,用變數來解釋,就是"Uid@IP:Port"的意思

這個結構記著,後面的步驟需要以這個結構連結Web Hosting的MySQL

image

 

2.2VS專案建立MySQL通道

這一步驟參考 尼克人生的 使用MySQL的MVC專案 Code First

首先需引用NuGet

對專案名稱(非方案名稱)點右鍵,選擇「管理NuGet套件」

image

切換到瀏覽分頁,在搜尋打上"MySQL"

找到以下3個套件:

MySql.Data

MySql.Data.EntityFramework

MySql.Web

需要注意以下幾點:

1.作者必須是Oracle,下載作者是MySQL的套件我自己實測是沒有用

2.以MySql.Data的版號為主,以我為例,當前是v8.0.21

則MySql.Data.EntityFramework和MySql.Web的版號也必須是v8.0.21

3.MySql.Data.EntityFramework的套件很多很雜,說明一下

MySql.Data.EntityFramework是給MVC使用,要裝這個

MySql.Data.EntityFrameworkCore是給.Net Core使用,裝這個沒用

MySql.Data.Entity的版號不對,裝了沒用

MySql.Data.Entities作者版號都不對,裝了沒用

image

image

選擇套件之後,版號右邊會多出一個向下的小黑箭頭,點下去即可開始安裝

MySql.Data會要求多安裝如下圖這些,確定即可

image

安裝完後切換到「已安裝」分頁,搜尋"MySQL"後應該可以看到三個套件有相同作者與版號

image

 

2.3連接字串預備

連接字串可以參考其他網路上的操作取得

不過我自己只使用其中四項

Server=localhost

Database=test5

UID=root

PWD=123456

合起來的字串就是:

"Server=localhost;Database=test5;UID=root;PWD=123456"

開啟Web.config(不是Views/Web.config)

因為建立專案的驗證使用「個別使用者帳戶」

因此可以在<connectionStrings></connectionStrings>裡看到預設的SQL Server連接字串

若未進行任何修改,將會使用SQL Server進行連接,而產出的DefaultConnection則會出現在/App_Data之下

因為剛剛已經安裝好MySQL的套件了

可以看到<connectionStrings></connectionStrings>裡除了DefaultConnection以外

還有多出一行<remove name="LocalMySqlServer" /><add connectionString="" name="LocalMySqlServer" providerName="MySql.Data.MySqlClient" />

以上這些都可以用<!--    ...    -->隱藏,我們只需要providerName="MySql.Data.MySqlClient"這個關鍵字串

先把最後的</connectionStrings>換行,避免後續的操作失誤

image

在<connectionStrings></connectionStrings>裡輸入

<add name="TestDatabase" connectionString="Server=localhost;Database=test5;UID=root;PWD=123456" providerName="MySql.Data.MySqlClient" />

其中name="TestDatabase"是MVC內部程式碼使用的DB代號,做為程式內部對應到Web.config用,與MySQL沒有直接關係

connectionString內,將方才組好的字串帶入,這樣就可以讓MVC專案與本地的MySQL連線

最後是providerName="MySql.Data.MySqlClient",要讓編譯器理解connectionString要指向MySQL的MySqlClient而不是SQL Server的System.Data.SqlClient

image

2.4建立自定義Model

以下在Scaffold處參考自 Will保哥的 如何將現有 ASP.NET MVC 4 網站部署到 Windows Azure 雲端平台

2.4.1建立Product.cs

對Models資料夾按右鍵,加入新增項目

image

命名為Product.cs

image

建立兩個屬性,其中一個命名為ID

image

2.4.2建立TestDatabase.cs

再到Models新增一個項目

image

從「資料」選擇「ADO.NET實體資料模型」,名稱寫為Web.Config裡輸入的TestDatabase

image

選擇「空的Code First模型」

image

按下全部皆是

image

開啟Models.TestDatabase.cs

image

因我們已經先在Web.config建立name=TestDatabase的連接字串

因此由VS自動建立的cs會改名成TestDatabase1

要將之改回TestDatabase

image

回到Web.config,可以看到自動建立了name=TestDatabase1

使用<!--   ...   -->把這一行擋掉,或者直接刪除也可,保留自己建立的TestDatabase就好

(</connectionStrings>會出現在這一行的最後,記得不要誤刪這個標籤)

image

建立完成上述兩個檔案後先按F6編譯程式,讓編譯器建立Product的Model

2.4.3建立ProductsController.cs

從Controllers點右鍵,選擇加入新增Scaffold項目

image

選擇「具有檢視、使用Entity Framework的MVC 5 控制器」

image

模型類別選擇Product(MVCforMySQLTest5.Models),如果剛才沒有先建置專案,不會有這個Model可選擇

image

資料內容類別選擇剛剛建立的TestDatabase(MVCforMySQLTest5.Models)

然後按下加入

image

等Scaffold自動建立完成,會得到紅框的檔案

image

2.5修改IdentityDbContext<ApplicationUser>的繼承

目前會形成Product生成的資料結構存在於MySQL的test5這個Database裡

但個別使用者帳戶的資料結構存在於App_Data裡的隱藏檔案,該檔案是SQL Server

因此這樣在專案Debug沒問題,但正式部屬到MySQL會出問題

因此需要捨棄App_Data自動生成資料,

將帳戶驗證的相關資料結構都轉移到自己建立的TestDatabase所指向的test5資料庫

 

以下有多方參考

 

限制條件參考自stack overflow的 How to enable migration for EF 6.4 and MySQL C#? 裡jrivam 的回答

IdentityDbContext的搬移參考自 michiproep 的 MIGRATION OF ASP MEMBERSHIP TO MVC5 IDENTITY USING MYSQL

以及 俱会一处的 ASP.NET MVC5+MySql使用ASP.NET 身份验证

 

首先開啟TestDatabase.cs,在public class TestDatabase : DbContext上方增加限制式

[DbConfigurationType(typeof(MySql.Data.EntityFramework.MySqlEFConfiguration))]

image

其中可以看到有7個參考的Products就是Scaffold自動生成的內容

說明DbSet會建立在TestDatabase指引的MySQL test5資料庫裡

 

再來開啟IdentityModels,可以看到如下內容

上方為身分驗證的結構,下方為預設會生成在App_Data內的SQL Server資料內容類別

image

我們要做的就是讓身分驗證產生的Tables移到MySQL的test5裡

 

將IdentityDbContext<ApplicationUser>複製

然後到TestDatabase.cs裡將public class TestDatabase : DbContext的DbContext取代之

 

將:base("DefaultConnection", throwIfV1Schema: false)的", throwV1SchemaL false"複製

貼到TestDatabase.cs的base()內

 

複製靜態方法,貼到TestDatabase.cs內,再修改方法的回傳結構為TestDatabase

image

完成後暫時如下,仍有紅字

將滑鼠移到IdentityDbContext上,加入using Microsoft.AspNet.Identity.EntityFramework;

image

最後TestDatabase.cs形成如下圖

image

我們需要再回到IdentityModels註解掉不使用的ApplicationDbContext

image

接下來會發生錯誤,順著錯誤指示到App_Start/IdentityConfig.cs內

將ApplicationDbContext改成TestDatabase

image

再到App_Start/Startup.Auth.cs內將ApplicationDbContext改成TestDatabase

image

如此,便完成將所有Tables移轉到MySQL上的前置動作了

2.6Code First Migrations

參考自程式小試身手的 【ASP.NET MVC】註冊新增欄位-Visual Studio 2015

從工具-->NuGet套件管理員-->套件管理器主控台啟動主控台

image

啟動後主控台會出現在畫面中下方

image

先輸入Enabled-Migrations,如果專案內只有一個DbContext,則不會需要多的參數

不然主控台會回覆說不知道要選哪個 請輸入完整且明確的DbContext來源

完整的輸入為Enabled-Migrations -ContextTypeName MVCforMySQLTest5.Models.TestDatabase

指令成功的話會得到「Code First移轉已為專案MVCforMySQLTest5啟用」的訊息

同時會在專案之下產生Migrations資料夾,內部產生Configuration.cs

image

image

開啟Configuration.cs

在AutomaticMigrationsEnabled = false;下多寫一行

SetSqlGenerator("MySql.Data.MySqlClient", new MySql.Data.EntityFramework.MySqlMigrationSqlGenerator());

image

存檔後回到NuGet主控台,輸入Add-Migration test5-v1

Add-Migration是指令 test5-v1則是我自己給這次的Migration所定義的類似版號的東西

實際上要輸入什麼是隨便的

成功的話主控台會回覆如下的訊息

image

在Migrations資料夾下會多出一個這次要Migration的cs檔

image

cs檔內部有Up和Down兩個方法

Up的方法就是VS會偵測DB裡的結構與預計的結構差多少欄位,在這次的Add-Migration中補出來

Down的則是檢測那些欄位需要移除

image

請先將Up裡的三個256改成128,因為MySQL從這裡建立會是以utf8mb4的collection定義欄位長度

但實際上MySQL僅會建立utf8的collection欄位,因此會回覆長度超過767的錯誤

這邊還沒研究出如何從Code指定MySQL產生來為必須為utf8mb4

因此,不能解決問題,那就先解決有問題的人吧@@

把256降為128的長度可以暫時解決此問題

改完後記得存檔

image

image

最後回到NuGet主控台,輸入Update-Database

成功的話可以看到最後一行應是「正在執行Seed方法」

image

我們可以到MySQL Workbench 8.0 CE裡

登入localhost的資料庫,即可看到Schema下多出了test5的Database

裡面的Tables則多了上述Up方法建立的Table,以及Migration管理用的__migrationhistory

image

打開__migrationhistory,可以看到這次Add-Migration的紀錄

image

若將這筆資料保留,則未來有發生欄位增減,就會以這個版號的內容為足跡紀錄,

下一次的Add-Migration將不會在Up和Down寫入新增或刪除當前沒有變動的地方

只會自動產出有新增的欄位於Up內或有刪除的欄位於Down內

而若要整個打掉重來,就可以把__migrationhistory的足跡紀錄全刪

同時把VS專案內Migrations資料夾內由Add-Migrations產生的檔案全刪

如此便可重頭開始

(Configuration如果刪了,則下次需要重新寫Enable-Migrations產生此檔案)

 

三、Google Domains

這一段我不多寫,直接引用參考,寫的也比我自己能寫的好

Wayne Fu 的 Google Domains 台灣可以使用了﹍購買 + 轉移網域(Godaddy) + DNS 設定心得

直接說優點

Google大品牌,買網址,靠信仰

有免費的WHOIS保護

目前12美元/年,貌似被加價的機會不高

但我並沒有要移轉任何現有的網域,所以這一步驟只要到付完款即可

文章後續的DNS設定都暫時不用管

而Google Domains在購買完後呈現如下

未來只要在DNS連結上Web hosting即可

image

四、myASP.Net

如果有錢的話,其實還是建議直接回到Azure用SQL Server就好

部屬什麼的都不用這麼麻煩

但誰叫我沒錢

只能在外面找看看有沒有比較便宜的

目前知道GoDaddy有Windows版的虛擬主機

不過沒有免費期間

第一個月就馬上要1美元

我想說先找免費的完成整個建置過程

確認我能夠徒手完成,再去思考是否要付費

因此找到myASP.NET

網上大多是LAMP架構(Linux + Apache + MySql + PHP)

要能支援ASP.NET的Web Hosting是比較少的

myASP.NET有兩個月的免費期

應該夠我學習了

如下圖,點選Free Trial後就可以開始註冊

在註冊時一開始只會有30天的試用,你可以按旁邊的facebook Like

發一篇只有私人的po文即可

這樣就可以變成60天試用了

image

myASP.NET註冊完後也會記兩封信給你

第一封是驗證電子信箱

第二封則是註冊成功後會收到關於FTP設定、Deploy設定、DNS設定等等資訊

下圖是第二封信裡關於DNS的設定

image

回到Google Domains,在左側點選DNS

原始是選擇「使用Google Domains名稱伺服器」

改為「使用自訂名稱伺服器」,並把信件中收到的三個DNS都打進去

Google Domains會問你是否要重啟之類的問題,不用管,因為才剛申請

大約等待1~2小時候,等Internet都括賽出去這次的DNS設定後

在Google Domains買的網址就可以正式連上myASP.NET的Web Hosting了

image

回到myASP.NET

剛登入時的畫面是這樣

點選ACTIONS的9個正方形那個按鈕可以進入Control Panel

image

點選WEBSITES分頁,可以加入Domain Name

把從Google Domains買來的網址打上去

接下來就是等待兩邊正式打通即可

image

 

五、發布

5.1Web Hosting的MySQL

仍然在myASP.NET,切換到DATABASE分頁,選擇MySql

點選+Add Database

把你想要的名稱和密碼打上,資料庫大小設定好

就完成建立Web Hosting的MySql了

得到如下圖所示之結果

可以點選<...>按鈕顯示連結字串

複製ASP.NET的連結字串

image

開啟VS的Web.config

將原本設定於本機localhost的字串改成web hosting的字串

這樣VS發布時就會連上web hosting的MySql

image

還記得2.1步驟,我們知道了MySQL Workbench吃的新增資料庫連結設定是"Uid@IP:Port"

因此先開一個空白的txt,打上「紅色@藍色:3306」(紅色與藍色對應上一張圖的Login ID和MySQL Domain Name)

複製你打好的這段字串,打開MySQL Workbench後於空白處按右鍵,選擇「Add Connection(s) from Clipboard」

就會跳出要你輸入帳密的登入畫面

帳號是上圖的紅色,密碼則是...密碼就是密碼~

 

image

完成後將如下圖所示

點選後即可從Workbench 遠端連線到myASP.NET的MySQL了

image

回到VS專案,在NuGet主控台輸入一次Update-Database

將DataTable建立好

image

再進入Workbench檢查Web hosting的MySql是否已經完成建立相關DataTables

image

5.2發布設定與錯誤排除

回到myASP.NET的WEBSITES

點選Show WebDeploy Info

image

再點選Get Publish Setting,會下載發行設定檔

image

image

開啟VS專案,對專案名稱點右鍵,選擇「發佈」

image

選擇匯入設定檔

image

將剛才下載的發行設定檔匯入,按下完成

image

再點選「編輯」

image

密碼是website的密碼,不是MySql的密碼

打完後先驗證可否連線,可以的話就勾儲存密碼

然後按「下一個」到下一步驟

image

將檔案發布選項打開,三個全勾

這樣就可以儲存所有設定了

image

最後按下發佈,就等待資料部屬完成,會自動開啟網頁

image

發布後會得到如下的錯誤

image

回到Web.config

在</system.web>前一行加上<customErrors mode="Off" />

image

再重新執行發布

得到如下的錯誤

image

參考 [SOLVED] access denied can not execute the program csc.exe after publishing .net application web deploy mvc app

從專案名稱右鍵開啟NuGet套件

image

在「已安裝」分頁搜尋"Microsoft.CodeDom.Provider"

將唯一出現的套件移除

image

image

再次發布

得到跳出的首頁

image

嘗試註冊

image

成功!!

image

再把路由移到/Products/Index

可以取得空的Products首頁

image

嘗試Create資料成功!!

image

至此,部屬至Web Hosting已經結束

過程磨難與困頓

例如有找過幾篇文章是使用FTP發布

我實作後可以發布,但無法正確連線到Web Hosting的MySQL

至今仍不解原因

好在最後可以用PublishSetting發布還成功

又或者utf8mb4的問題也還未解決,僅能先用256改128的方式先強行建立DataTable

以及其他有的沒的小問題不計其數

總之成功發布,一切的過程皆有所得,亦有所獲

算是可喜可賀~

若有其他先進能跟著到這且成功,不妨給自己一掌聲鼓勵~~

六、參考整理

文中都已經有寫入參考來源

我於最後再將這些參考統一顯示

 

尼克人生 使用MySQL的MVC專案 Code First:

https://dotblogs.com.tw/OldNick/2017/03/20/223102

 

取得MySQL連結字串:

https://www.itread01.com/content/1548055447.html

 

Will保哥 如何將現有 ASP.NET MVC 4 網站部署到 Windows Azure 雲端平台:

www.youtube.com/watch?v=oeJ3iSL_kjw&list=WL&index=3&t=156s&ab_channel=Will%E4%BF%9D%E5%93%A5

 

MySQL在資料內容類別的限制條件 jrivam 的回答:

https://stackoverflow.com/questions/60789697/how-to-enable-migration-for-ef-6-4-and-mysql-c

 

michiproep MIGRATION OF ASP MEMBERSHIP TO MVC5 IDENTITY USING MYSQL:

https://codeimp.wordpress.com/2014/11/28/migration-of-asp-membership-to-mvc5-identity-using-mysql/

 

俱会一处  ASP.NET MVC5+MySql使用ASP.NET 身份验证 :

https://blog.csdn.net/jhycjhyc/article/details/52747970

 

Wayne Fu  Google Domains 台灣可以使用了﹍購買 + 轉移網域(Godaddy) + DNS 設定心得:

https://www.wfublog.com/2019/04/google-domains-tw-purchase-transfer-godaddy-dns.html

 

[SOLVED] access denied can not execute the program csc.exe after publishing .net application web deploy mvc app:

https://www.aspdotnet-sekhar.com/2017/09/solved-access-denied-can-not-execute-comman-being-executed-was-csc-exe-publishing-web-app-net-mvc.html

 

後記

因為不太清楚myASP.NET的來頭是什麼

所以不打算在這裡建立太過高級或私密的網站

可能在我都熟悉發布與建置後續的相關事宜後

會考慮使用GoDaddy的Windows虛擬主機來建置

到時候就是在GoDaddy付款,然後在Google Domains重新設定DNS即可

 

 

 

 

 

arrow
arrow

    wings890109 發表在 痞客邦 留言(0) 人氣()