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

歷經10天的跌跌撞撞

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

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

 

一、開發環境與新專案

1.1檢查環境

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

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

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

1.2開新專案

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

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

開錯就只能重開新專案

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

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

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

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

 

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

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

二、MySQL

2.1安裝MySQL

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

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

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

如果沒有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

 

2.2VS專案建立MySQL通道

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

首先需引用NuGet

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

切換到瀏覽分頁,在搜尋打上"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作者版號都不對,裝了沒用

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

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

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

 

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>換行,避免後續的操作失誤

在<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

2.4建立自定義Model

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

2.4.1建立Product.cs

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

命名為Product.cs

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

2.4.2建立TestDatabase.cs

再到Models新增一個項目

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

選擇「空的Code First模型」

按下全部皆是

開啟Models.TestDatabase.cs

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

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

要將之改回TestDatabase

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

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

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

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

2.4.3建立ProductsController.cs

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

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

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

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

然後按下加入

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

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))]

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

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

 

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

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

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

 

將IdentityDbContext<ApplicationUser>複製

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

 

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

貼到TestDatabase.cs的base()內

 

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

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

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

最後TestDatabase.cs形成如下圖

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

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

將ApplicationDbContext改成TestDatabase

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

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

2.6Code First Migrations

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

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

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

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

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

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

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

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

開啟Configuration.cs

在AutomaticMigrationsEnabled = false;下多寫一行

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

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

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

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

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

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

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

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

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

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

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

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

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

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

改完後記得存檔

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

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

我們可以到MySQL Workbench 8.0 CE裡

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

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

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

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

下一次的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即可

四、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天試用了

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

第一封是驗證電子信箱

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

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

回到Google Domains,在左側點選DNS

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

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

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

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

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

回到myASP.NET

剛登入時的畫面是這樣

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

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

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

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

 

五、發布

5.1Web Hosting的MySQL

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

點選+Add Database

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

就完成建立Web Hosting的MySql了

得到如下圖所示之結果

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

複製ASP.NET的連結字串

開啟VS的Web.config

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

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

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

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

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

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

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

 

完成後將如下圖所示

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

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

將DataTable建立好

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

5.2發布設定與錯誤排除

回到myASP.NET的WEBSITES

點選Show WebDeploy Info

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

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

選擇匯入設定檔

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

再點選「編輯」

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

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

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

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

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

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

發布後會得到如下的錯誤

回到Web.config

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

再重新執行發布

得到如下的錯誤

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

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

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

將唯一出現的套件移除

再次發布

得到跳出的首頁

嘗試註冊

成功!!

再把路由移到/Products/Index

可以取得空的Products首頁

嘗試Create資料成功!!

至此,部屬至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即可

 

 

 

 

 

文章標籤
全站熱搜
創作者介紹
創作者 wings890109 的頭像
wings890109

幽嵐飋翼

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