第一部分
1.自我介紹
就讀于山東大學軟體工程專業，現在是大三的學生。在暑假中打算将之前的項目使用springboot架構重新寫一遍并且釋出到公網上。因為之前寫項目實訓項目時用到過阿裡雲伺服器，感覺挺好用的并且API文檔比較易于讀取就選擇在租用一台阿裡雲伺服器。
進入阿裡雲官網後
進入開發者-成長計劃。
了解到了“飛天加速計劃·高校學生在家實踐”活動。并且完成考試獲得了一台河源地區的雲伺服器（14天）。
因為我之前用過Centos7.2的系統，于是選擇的仍然是Centos7.2的鏡像。
第二部分
2.阿裡雲ECS使用攻略
2.1 登入雲伺服器
在購買ECS伺服器後，系統會建立一個ECS執行個體。每一個ECS執行個體對應一台已購買的雲伺服器。您可以通過電腦上自帶的終端工具通路雲伺服器，進行應用部署和環境搭建。
- 在ECS執行個體清單頁面，選擇執行個體的所屬地域。
- 找到目标執行個體，然後在操作列選擇【更多】> 【密碼/密鑰】 > 【重置執行個體密碼】，然後在彈出的對話框設定ECS執行個體的登入密碼。
- 在彈出的頁面，單擊【立即重新開機】使新密碼生效。
- 在伺服器端口22的安全組中添加自己電腦的ip位址
- 在ECS執行個體清單頁面，複制ECS執行個體的公網IP位址。
- 打開電腦上的指令行終端工具。
我使用的是MacOS直接使用終端連接配接（windows使用Powershell登入）。
7.在終端中輸入連接配接指令ssh root@[公網位址]。
登入成功。
2.2 搭建java環境
因為打算将springboot項目以jar包的形式釋出，是以需要java的開發環境。
因為本地的java版本是：
14.0.1
在
官網下載下傳java的安裝包：
mac下和伺服器檔案傳輸的神器--
transmit 将下載下傳下來的java包放到伺服器上
進入服務端的jdk所在的檔案夾，執行以下指令
rpm -ivh jdk-8u191-linux-x64.rpm 驗證安裝是否成功
>>> java -version #驗證安裝成功 安裝成功。
2.3 安裝Apache
yum -y install httpd httpd-manual mod_ssl mod_perl mod_auth_mysql 傳回類似如下圖結果則表示安裝成功。
先打開伺服器80端口的安全組
打開浏覽器輸入ECS伺服器的公網IP，如果顯示如下圖的測試頁面表示Apache服務安裝成功
3.使用阿裡雲雲資料庫
3.1 目的
節約伺服器的記憶體，便于開發
購買 雲資料庫一年隻需20元很劃算的。
3.2 開放端口登入
在入方向添加你的伺服器的ip位址，和你的電腦的ip位址
伺服器是為了部署在伺服器上的項目能夠正常通路雲資料庫，
你的電腦是為了通過Navicat連接配接，通過圖像化界面處理。
4. 使用阿裡雲OSS進行上傳圖檔
首先需要開啟OSS服務--先使用後付費。
建立Bucket
設為公共讀。
通過API上傳圖像：
- 在pom中添加依賴
<!-- oss-檔案上傳的準備 --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.10.2</version> </dependency> <dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.activation</groupId> <artifactId>activation</artifactId> <version>1.1.1</version> </dependency> <!-- no more than 2.3.3--> <dependency> <groupId>org.glassfish.jaxb</groupId> <artifactId>jaxb-runtime</artifactId> <version>2.3.3</version> </dependency> - 上傳對象
public class OssPutObject { public static String putObject(String url,String fileName) throws FileNotFoundException { // yourEndpoint填寫Bucket所在地域對應的Endpoint。以華東1（杭州）為例，Endpoint填寫為https://oss-cn-hangzhou.aliyuncs.com。 String endpoint = "https://oss-cn-beijing.aliyuncs.com"; // 阿裡雲賬号AccessKey擁有所有API的通路權限，風險很高。強烈建議您建立并使用RAM使用者進行API通路或日常運維，請登入RAM控制台建立RAM使用者。 String accessKeyId = AliyunAccout.accessKeyId; String accessKeySecret = AliyunAccout.accessKeySecret; // 建立OSSClient執行個體。 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); // 填寫本地檔案的完整路徑。如果未指定本地路徑，則預設從示例程式所屬項目對應本地路徑中上傳檔案流。 InputStream inputStream = new FileInputStream(url); // 依次填寫Bucket名稱（oss-img-fxk）和Object完整路徑（例如exampledir/exampleobject.txt）。Object完整路徑中不能包含Bucket名稱。 ossClient.putObject("oss-img-fxk", "courseSS/imgAvatar/"+fileName, inputStream); // 關閉OSSClient。 ossClient.shutdown(); //傳回上傳檔案的url String resultUrl = "https://oss-img-fxk.oss-cn-beijing.aliyuncs.com/courseSS/imgAvatar/"+fileName; return resultUrl; } - 前端代碼
<!-- 修改個人資訊：頭像 --> <div class="layui-col-md10 xuanzeqiYincang" id="messageP2"> <div class="marginPanel"> <div class="layui-row layui-col-space15"> <div class="layui-col-md6" > <div class="layui-panel" style="text-align: center"> <p style="font-size: 25px;font-weight: bolder;font-family: serif;margin: 5px"> 請上傳你的頭像</p> <!--自動封裝了一個name為file的參數對應上傳的圖檔--> <div class="layui-upload"> <button type="button" class="layui-btn" id="updateImg">上傳圖檔</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="avatar" style="width: 200px;height: 200px"> <p id="demoText"></p> </div> <div style="width: 95px;margin-left: 44%"> <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo"> <div class="layui-progress-bar" lay-percent=""></div> </div> </div> </div> <p style="font-size: 15px;font-weight: lighter;font-family: serif;margin: 3px"> 圖檔的大小限制為500KB</p> </div> </div> </div> </div> </div>
<!--頭像上傳的引用-->
<script th:inline="javascript">
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
//正常使用 - 普通圖檔上傳
var uploadInst = upload.render({
elem: '#updateImg'
,url: '/service/update' //此處用的是第三方的 http 請求示範，實際使用時改成您自己的上傳接口即可。
,size: 1024*5 //大小限制為5M
,acceptMime: 'image/*'//規定打開檔案選擇框時，篩選出的檔案類型，值為用逗号隔開的 MIME 類型清單。
,before: function(obj){
//預讀本地檔案示例，不支援ie8
obj.preview(function(index, file, result){
$('#avatar').attr('src', result); //圖檔連結（base64）
});
element.progress('demo', '0%'); //進度條複位
layer.msg('上傳中', {icon: 16, time: 0});
}
,done: function(res){
//如果上傳失敗
if(res.code > 0){
return layer.msg('上傳失敗');
}
//上傳成功的一些操作
$('#demoText').html(''); //置空上傳失敗的狀态
console.log(res.code)
console.log(res.msg)
//重新整理頁面
location.reload();
}
,error: function(){
//示範失敗狀态，并實作重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
//進度條
,progress: function(n, elem, e){
element.progress('demo', n + '%'); //可配合 layui 進度條元素使用
if(n == 100){
layer.msg('上傳完畢', {icon: 1});
}
}
});});
</script> 效果展示：
第三部分
通過這次學習掌握了阿裡雲--雲伺服器、雲資料庫和OSS儲存的使用，我的研究所學生階段研究方向正好是雲計算方面，未來可期。
通過“高校學生在家實踐”活動調動自己學習的積極性，收獲頗豐。