主頁 > 企業開發 > 關于前端vue打包專案以及靜態網站部署專案到阿里云ECS云服務器初學簡單教程

關于前端vue打包專案以及靜態網站部署專案到阿里云ECS云服務器初學簡單教程

2023-05-13 08:49:54 企業開發

準備作業:

1.首先進入https://ecs.console.aliyun.com/ 領取或者購買一臺簡單的ECS云服務器,

進入網站注冊登錄后拉到頁面最下面或者頂部搜索免費云服務器領取立即試用 ,當然富哥花錢買一臺服務器也行,

 

創建完了以后可以進入云服務ECS作業臺,然后就是以下界面

 

點擊右邊的實體進入到實體界面  會默認生成一個實體(也可以自己嘗試創建新的實體)

給當前的實體修改成自己想要保存的實體名稱和密碼(自己要記住后面需要用到)

 

然后點擊左側的網路與安全>安全組并且進入創建一條80埠的安全組規則并保存

回到剛才的實體串列點擊遠程連接并通過Workbench遠程連接(其他方式可以自己嘗試),輸入前面自己修改的實體名稱+密碼登錄,

會進入到一個黑色界面類似控制臺的頁面

有兩個比較重要的模板需要使用      右上角的檔案>打開新檔案樹以及會話>新終端

一、在右側的新終端搭建我們的Docker CE(社區版)企業版則為Docker EE,

  首先安裝Docker依賴庫

yum install -y yum-utils device-mapper-persistent-data lvm2

添加Docker CE的軟體源資訊

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

安裝Docker CE

yum makecache fast
yum -y install docker-ce

最后啟動Docker服務

systemctl start docker

額外的兩個Docker常用命令

重新加載服務配置

systemctl daemon-reload

重啟Docker服務

systemctl restart docker

二、使用Docker安裝Nginx服務

查看Docker鏡像倉庫中Nginx的可用版本

docker search nginx

拉取最新版的Nginx鏡像

docker pull nginx:latest

查看本地鏡像

docker images

運行容器

docker run --name nginx-test -p 8080:80 -d nginx

命令引數說明:

 --name nginx-test:容器名稱,

 -p 8080:80 埠進行映射,將本地8080埠映射到容器內部的80埠,

 -d nginx 設定容器在后臺一直運行,

然后在瀏覽器輸入http://<ECS公網地址>:8080打開Nginx服務,代表Nginx服務已經正常運行,

 附:參考配置地址:https://developer.aliyun.com/article/946460

三、單獨安裝Nginx依賴并使用Naginx

安裝依賴包

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

下載并解壓安裝包

//cd進入/usr/local檔案目錄
cd /usr/local
//創建一個nginx檔案夾
mkdir nginx
//cd進入nginx檔案
cd nginx
//下載tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
//下載好進行解壓命令
tar -xvf nginx-1.13.7.tar.gz

安裝Nginx

//進入nginx目錄
cd /usr/local/nginx
//進入目錄
cd nginx-1.13.7
//執行命令 考慮到后續安裝ssl證書 添加兩個模塊
./configure --with-http_stub_status_module --with-http_ssl_module
//執行make命令
make
//執行make install命令
make install

注意make有可能會出現很多報錯的情況

簡單列舉幾項解決方案(其他的自行百度)

第一種錯誤

src/os/unix/ngx_user.c: In function ‘ngx_libc_crypt’:
src/os/unix/ngx_user.c:36:7: error: ‘struct crypt_data’ has no member named ‘current_salt’
   36 |     cd.current_salt[0] = ~salt[0];
      |       ^
make[1]: *** [objs/Makefile:797:objs/src/os/unix/ngx_user.o] 錯誤 1
make[1]: 離開目錄“/home/zyz/nginx-1.12.0/nginx-1.12.0”
make: *** [Makefile:8:build] 錯誤 2

解決方案

打開檔案樹串列進入/usc/local/nginx/nginx-1.13.7/src/os/unix/ngx_user.c檔案   注銷  cd.current_salt[0] = ~salt[0];保存

第二種錯誤

  src/http/ngx_http_script.c: 在函式‘ngx_http_script_add_full_name_code’中:
    src/http/ngx_http_script.c:1296:18: 錯誤:cast between incompatible function types from ‘size_t (*)(ngx_http_script_engine_t *)’ {或稱 ‘long unsigned int (*)(struct <匿名> *)’} to ‘void (*)(ngx_http_script_engine_t *)’ {或稱 ‘void (*)(struct <匿名> *)’} [-Werror=cast-function-type]
         code->code = (ngx_http_script_code_pt) ngx_http_script_full_name_len_code;
                      ^
    cc1:所有的警告都被當作是錯誤
    make[1]: *** [objs/Makefile:893:objs/src/http/ngx_http_script.o] 錯誤 1
    make[1]: 離開目錄“/usr/download/nginx-1.14.1”
    make: *** [Makefile:8:build] 錯誤 2

解決方案

打開檔案樹串列進入/usc/local/nginx/nginx-1.13.7/objs/Makefile檔案  

CFLAGS =  -pipe  -O -W -Wall -Wpointer-arith -Wno-unused-parameter -Werror -g 

改為

CFLAGS =  -pipe  -O -W -Wall -Wpointer-arith -Wno-unused-parameter -g 

如何啟動Nginx服務

輸入命令

cd /usr/local/nginx/sbin

到目錄執行:

./nginx

第三種錯誤(Nginx啟動錯誤)

Nginx啟動時提示nginx: [emerg] still could not bind()

首先查看Nginx組態檔的埠為80埠

netstat -ntlp|grep 80

如果能查到有tcp的資料并且最后是6****/nginx:worker

輸入kill關閉占用的行程直到查詢不到占用情況

最后輸入重啟Nginx就不會報錯了

./nginx

附簡單的nginx命令

./nginx 啟動
./nginx -s stop 關閉
./nginx -s reload 重啟 

詳細命令參考:https://blog.csdn.net/GyaoG/article/details/118054247

四、上傳打包好的前端web專案或者網址

先下載一個叫FileZilla免費開源的FTP客戶端軟體,

下載地址:http://soft.ykmjk.com/sinfo/104695380_4002451.html

下載好并安裝打開軟體

輸入阿里云的公網IP以及用戶名和密碼 埠進行連接,連接成功后會出現上面的左右兩邊的檔案串列

左側為本地的站點檔案(找到你需要上傳的網址或者dist打包專案

右側為云服務ECS的的檔案串列(找到/usc/local/nginx/html目錄創建你的檔案夾并將打包好的檔案內容上傳到里面,例如檔案名appyj)

然后就可以通過瀏覽器打開http://8.134.**.***/appyj 就可以訪問專案了(這里的IP是云服務器的公網IP)

這里只上傳了vue專案打包后的檔案  上傳多個專案就多新建目錄并上傳就可以了,

不同的埠使用還在研究  有大佬也可以告知一下,,,(寫的有點隨意,只作為個人案例記錄,僅供參考),

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/552347.html

標籤:其他

上一篇:一文讓你搞懂javascript如何實作繼承

下一篇:返回列表

標籤雲
其他(158960) Python(38129) JavaScript(25420) Java(18034) C(15226) 區塊鏈(8265) C#(7972) AI(7469) 爪哇(7425) MySQL(7179) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5871) 数组(5741) R(5409) Linux(5339) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4572) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2433) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) .NET技术(1972) 功能(1967) Web開發(1951) HtmlCss(1936) python-3.x(1918) C++(1915) 弹簧靴(1913) xml(1889) PostgreSQL(1875) .NETCore(1860) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 關于前端vue打包專案以及靜態網站部署專案到阿里云ECS云服務器初

    準備作業: 1.首先進入https://ecs.console.aliyun.com/ 領取或者購買一臺簡單的ECS云服務器。 進入網站注冊登錄后拉到頁面最下面或者頂部搜索免費云服務器領取立即試用 ,當然富哥花錢買一臺服務器也行。 創建完了以后可以進入云服務ECS作業臺,然后就是以下界面 點擊右邊的 ......

    uj5u.com 2023-05-13 08:49:54 more
  • 一文讓你搞懂javascript如何實作繼承

    一、本文想給你聊的東西包含一下幾個方面:(僅限于es6之前的語法哈,因為es6里面class這關鍵字用上了。。) 1.原型是啥?原型鏈是啥? 2.繼承的通用概念。 3.Javascript實作繼承的方式有哪些? 二、原型是啥?原型鏈是啥? 1.原型是函式本身的prototype屬性。 首先js和ja ......

    uj5u.com 2023-05-12 09:33:07 more
  • web游覽器的標簽頁仿 ios mac 蘋果的墓碑機制 (js代碼)

    背景: 本來專案開發系統防掛機功能,在其余游覽器中均可以使用。但是呢在蘋果的safair游覽器中會出現幾率失效,最后經過排查發現是蘋果的墓碑機制導致。即:此標簽頁活躍,其他標簽頁假死。然后就導致防掛機失效了。 原理: 假如當前游覽器中有3個標簽頁分別是A,B,C,每個標簽頁都有倒計時。正常情況下,每 ......

    uj5u.com 2023-05-12 09:33:01 more
  • 記錄--Vue3+TS(uniapp)手擼一個聊天頁面

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 Vue3+TS(uniapp)手擼一個聊天頁面 前言 最近在自己的小程式中做了一個智能客服,API使用的是云廠商的API,然后聊天頁面...嗯,找了一下關于UniApp(vite/ts)版本的好像不多,有一個官方的但其中的其他代碼太多了, ......

    uj5u.com 2023-05-12 09:32:47 more
  • JavaScript全決議——this指向

    本系列內容為JS全決議,為千鋒教育資深前端老師獨家創作 致力于為大家講解清晰JavaScript相關知識點,含有豐富的代碼案例及講解。如果感覺對大家有幫助的話,可以【點個關注】持續追更~ this指向(掌握) this 是一個關鍵字,是一個使用在作用域內的關鍵字 作用域分為全域作用域和區域作用域(私 ......

    uj5u.com 2023-05-12 09:32:37 more
  • 深淺拷貝,溫故知新

    1、深拷貝 1.1、概念 物件的深拷貝是指其屬性與其拷貝的源物件的屬性不共享相同的參考(指向相同的底層值)的副本。 因此,當你更改源或副本時,可以確保不會導致其他物件也發生更改;也就是說,你不會無意中對源或副本造成意料之外的更改。 在深拷貝中,源和副本是完全獨立的。深拷貝與其源物件不共享參考,所以對 ......

    uj5u.com 2023-05-12 09:32:33 more
  • Webpack5構建性能優化:構建耗時從150s到60s再到10s

    作者:京東科技 牛志偉 近期對Webpack5構建性能進行了優化,構建耗時從150s到60s再到10s,下面詳細講解下優化程序。 優化前現狀 1.歷史專案基于Vue3 + Webpack5技術堆疊,其中webpack配置項由開發者自己維護(沒有使用@vue/cli-service),并且做了環境分離。 ......

    uj5u.com 2023-05-12 09:32:29 more
  • Layui+dtree實作左邊分類串列,右邊資料串列

    效果如下 代碼實作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>帖子類別</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Comp ......

    uj5u.com 2023-05-12 09:32:23 more
  • JS中的箭頭函式

    在JavaScript中,箭頭函式是一種簡化的函式語法,它在ES6(ECMAScript 2015)引入。箭頭函式的語法比傳統的function運算式更簡潔,同時還有一些特性,例如繼承外部作用域的this值。 箭頭函式的基本語法如下: (param1, param2, ..., paramN) => ......

    uj5u.com 2023-05-12 09:32:18 more
  • js 樹形結構根據id獲取父級節點元素

    封裝函式 // 傳入 id、樹形結構資料 export function getParentTree(id, tree) { let arr = [] //要回傳的陣列 for (let i = 0; i < tree.length; i++) { let item = tree[i] arr = ......

    uj5u.com 2023-05-12 09:32:14 more