如何制作門戶網(wǎng)站宣傳推廣
部署
參考文章：如何部署網(wǎng)站？來比比誰的方法多 - 嗶哩嗶哩大家好，我是魚皮，不知道朋友們有沒有試著部署過自己開發(fā)的網(wǎng)站呢？其實(shí)部署網(wǎng)站非常簡(jiǎn)單，而且有非常多的花樣。這篇文章就給大家分享幾種主流的前端 / 后端項(xiàng)目部署方式吧！前端部署對(duì)于前端項(xiàng)目，打包之后往往是一個(gè)目錄，目錄中包含 index.html（入口文件）、css、js 等等。那么我們要做的事情其實(shí)就是想辦法 讓用戶訪問到這些文件 ，包含兩個(gè)關(guān)鍵的問題：文件存放到哪里？怎么提供文件訪問能力？圍繞這兩個(gè)問題，常見的部署方式有以下五種。1. web 服務(wù)器將文件放到遠(yuǎn)程服務(wù)器上（沒有服務(wù)器也可以在自
https://www.bilibili.com/read/cv16179200
需要Linux服務(wù)器，建議使用(CentOs8+ 7.6以上)
多環(huán)境
多環(huán)境：值同一套項(xiàng)目代碼在不同的階段需要根據(jù)實(shí)際情況來調(diào)整配置并且部署到不同的機(jī)器上（測(cè)試 開發(fā) 生產(chǎn)等不同環(huán)境）
本地開發(fā)：localhost（127.0.0.1）
參考文章：多環(huán)境設(shè)計(jì)_程序員魚皮的博客-CSDN博客3 分鐘學(xué)會(huì)企業(yè)開發(fā)中的多環(huán)境知識(shí)大家好，我是魚皮，今天給大家分享企業(yè)項(xiàng)目開發(fā)的重要知識(shí) —— 多環(huán)境。本文大綱：什么是多環(huán)境？先思考一個(gè)問題。假如我們有一個(gè)數(shù)百萬用戶正在用的網(wǎng)站，網(wǎng)頁(yè)文件部署在幾臺(tái)服務(wù)器上。那現(xiàn)在我們要開發(fā)上線一個(gè)新功能，應(yīng)該怎么做呢？老弟小阿巴問：寫好代碼后，直接更新服務(wù)器上的網(wǎng)頁(yè)文件么？我一巴掌抽過去：那萬一你的代碼有 Bug，不就影響到線上用戶的使用了么？老弟思考了下：那寫好代碼后，在本地測(cè)試運(yùn)行沒有問題后，再發(fā)布上線？我：思路不錯(cuò)，但問題在于，如果本地._多環(huán)境設(shè)計(jì)https://blog.csdn.net/weixin_41701290/article/details/120173283
為什么需要多環(huán)境
-
每個(gè)環(huán)境互不影響
-
為了區(qū)分不同階段：/開發(fā)/測(cè)試
-
對(duì)項(xiàng)目進(jìn)行優(yōu)化
-
本地日志級(jí)別
-
精簡(jiǎn)依賴，節(jié)省項(xiàng)目體積
-
項(xiàng)目的環(huán)境/參數(shù)可以調(diào)整，比如Jvm參數(shù)
-
-
針對(duì)不同環(huán)境做同的事
多環(huán)境分類
-
本地環(huán)境（自己的電腦）
localhost -
開發(fā)環(huán)境（遠(yuǎn)程開發(fā)）大家連同一臺(tái)機(jī)器，為了大家方便
-
測(cè)試環(huán)境（測(cè)試） 開發(fā)/測(cè)試/產(chǎn)品 單元測(cè)試/性能開發(fā)/功能測(cè)試/系統(tǒng)集成測(cè)試，獨(dú)立的數(shù)據(jù)庫(kù)，獨(dú)立的服務(wù)器
-
預(yù)發(fā)布環(huán)境：（體驗(yàn)服）和正式環(huán)境一致
-
正式環(huán)境：（線上，公開對(duì)外訪問的項(xiàng)目）：盡量不要改動(dòng)，保證上線前的代碼是完美運(yùn)行的
-
沙箱環(huán)境：（實(shí)驗(yàn)環(huán)境）：為了做實(shí)驗(yàn)
前端多環(huán)境實(shí)戰(zhàn)
-
請(qǐng)求環(huán)境
-
開發(fā)環(huán)境:
localhost:xxxx -
線上環(huán)境：
XXX.com
-
-
怎么讓前端運(yùn)行的時(shí)候知道是哪個(gè)環(huán)境呢？
-
使用函數(shù)
-
startFront(env){if(env === 'prod'){//不輸出注釋//項(xiàng)目?jī)?yōu)化//修改請(qǐng)求地址}else{//保持本地開發(fā)邏輯}
}
用了Umi框架，bulid的時(shí)候會(huì)自動(dòng)傳入NODE_ENV=production參數(shù)，start
-
啟動(dòng)方式：
npm run start（本地啟動(dòng)，監(jiān)聽端口，自動(dòng)更新） -
線上環(huán)境：
npm run build（項(xiàng)目構(gòu)建打包），可以使用server工具啟動(dòng)（在node.js終端進(jìn)行安裝，命令：npm install --global serve）
-
因?yàn)榉庋b了全局返回對(duì)象所以在里面設(shè)置對(duì)應(yīng)的連接地址
-
將圖片中的
http://user.backend.code.nav.cn換成自己的前端地址
-
項(xiàng)目的配置
不同的項(xiàng)目（框架）都有不同的配置文件，umi 的配置文件是 config，可以在配置文件后添加對(duì)應(yīng)的環(huán)境名稱后綴來區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境。參考文檔：https://umijs.org/zh-CN/docs/deploymenthttps://umijs.org/zh-CN/docs/deployment
-
開發(fā)環(huán)境：
config.dev.ts -
生產(chǎn)環(huán)境：
config.prod.ts -
公共配置：
config.ts不帶后綴
后端環(huán)境
在resource目錄中添加生產(chǎn)環(huán)境的yaml配置文件
格式為：application-prod.yaml在這個(gè)文件中配置生產(chǎn)環(huán)境的配置，其余配置不變，主要是數(shù)據(jù)庫(kù)的地址
后端主要配置
-
依賴的環(huán)境地址
-
數(shù)據(jù)庫(kù)地址
-
緩存地址
-
消息隊(duì)列地址
-
項(xiàng)目端口號(hào)
-
-
服務(wù)器配置
項(xiàng)目運(yùn)行測(cè)試
-
可以在啟動(dòng)時(shí)傳入環(huán)境變量
-
上線項(xiàng)目時(shí)，需要使用maven工具對(duì)項(xiàng)目進(jìn)行打包，在到包的時(shí)候會(huì)自動(dòng)運(yùn)行測(cè)試類，如果測(cè)試類中的某個(gè)測(cè)試方法不通過的話就會(huì)報(bào)錯(cuò)，這時(shí)候可以選擇點(diǎn)擊maven工具上的一個(gè)
標(biāo)志，禁用測(cè)試類（不推薦)
項(xiàng)目打包
運(yùn)行maven的工具package進(jìn)行打包
在控制臺(tái)運(yùn)行
執(zhí)行生產(chǎn)環(huán)境的配置
這里有亂碼問題 解決方式：(windows系統(tǒng)控制臺(tái)運(yùn)行SpringBoot jar包顯示中文亂碼的解決方案_springboot jar 亂碼_學(xué)海無涯，行者無疆的博客-CSDN博客chcp 65001 java -jar platform-core-1.0.0.jar
這里日志顯示是在prod環(huán)境下運(yùn)行的
Linux系統(tǒng)下Mysql安裝
-
使用寶塔面板進(jìn)行安裝：官方教程寶塔面板下載，免費(fèi)全能的服務(wù)器運(yùn)維軟件寶塔面板,近200個(gè)免費(fèi)應(yīng)用提供使用，如：網(wǎng)站管理、系統(tǒng)安全、系統(tǒng)監(jiān)控、計(jì)劃任務(wù)、文件管理、軟件管理、一鍵部署等
https://www.bt.cn/new/download.html
-
開發(fā)寶塔需要開方的端口，在云服務(wù)器安全組策略中開發(fā)端口
-
【如果是華為云】
-
-
也可以執(zhí)行在線安裝 安裝成功后會(huì)自動(dòng)顯示初始化密碼和用戶名，進(jìn)入更改
-
安裝完成后，注冊(cè)寶塔賬號(hào)并登錄
-
修改賬號(hào)和密碼
-
在寶塔面板的軟件商店中下載對(duì)應(yīng)版本的mysql，下載完成后啟動(dòng)
-
點(diǎn)擊左側(cè)導(dǎo)航欄的數(shù)據(jù)庫(kù)，
-
最后使用
Navcate連接遠(yuǎn)程數(shù)據(jù)庫(kù)-
輸入剛剛創(chuàng)建數(shù)據(jù)庫(kù)填入的用戶名和密碼連接
-
-
-
在遠(yuǎn)程連接工具中進(jìn)入MySQL客戶端
-
執(zhí)行SQL語句
use mysql; -- 查看MySQL數(shù)據(jù)庫(kù)編碼方式 show variables like 'character%'; -- 如果數(shù)據(jù)庫(kù)默認(rèn)編碼不是utf-8 -- 修改這些 SET character_set_client = utf8 ; SET character_set_connection= utf8 ; SET character_set_database= utf8 ;
-
Mysql修改密碼安全策略方法：Mysql修改密碼安全策略方法，臨時(shí)修改和永久修改方法_mysql修改密碼策略_星辰_218的博客-CSDN博客Mysql修改密碼安全策略方法，臨時(shí)修改和永久修改方法_mysql修改密碼策略https://blog.csdn.net/Code_is_a_swhite/article/details/130250394
以下是星球中小伙伴手動(dòng)安裝mysql的某些操作
手動(dòng)安裝是在是太麻煩了，還是用寶塔吧
-
新建用戶
-
安裝完成后 進(jìn)行防火墻配置
開始部署
前端
-
使用寶塔安裝
nginx -
安裝完成后啟動(dòng)
nginx-
在啟動(dòng)時(shí)，如果出現(xiàn)
Not Found說明需要配置環(huán)境變量 -
輸入
vim /etc/profile按shift+4+shift+G跳轉(zhuǎn)到最后一行 -
輸入
-
重新激活
source /etc/profile -
重新啟動(dòng) 輸入
nginx -
netstat -ntlp查看進(jìn)程，如果有nginx說明啟動(dòng)成功
-
-
將前端項(xiàng)目上傳到服務(wù)器
-
進(jìn)入nginx的config目錄
-
先復(fù)制一份nginx.config文件
-
將前端構(gòu)建出來的文件
dist移動(dòng)到服務(wù)器中的一個(gè)文件夾中這里是/www/userCenter-front本來所有文件是在dist中的，使用mv * ../將他移動(dòng)到userCenter-front中，然后使用rm -rf dist刪除dist目錄 -
進(jìn)入nginx中的config目錄，修該配置
-
刷新配置
nginx -s reload, -
訪問自己的服務(wù)器的ip即可看到前端頁(yè)面
問題：
寶塔面板無法打開報(bào) nginx Not Found 404 問題：
寶塔面板404 Not Found解決方案_燦燦的金的博客-CSDN博客查看全部的網(wǎng)址，然后就行了。這是因?yàn)闆]有輸入安全的網(wǎng)址。_寶塔面板404
https://blog.csdn.net/m0_46495271/article/details/130948376?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-130948376-blog-108024625.235
-
后端
-
安裝maven
wget https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz
-
為了方便，給mvaen配置環(huán)境變量
-
pwd得到當(dāng)前目錄 復(fù)制 -
vim /etc/profile在最后一行添加
剛剛復(fù)制的目錄
-
-
安裝jdk
-
使用寶塔安裝tomcat,里面有jdk傳遞
-
-
將后端項(xiàng)目的jar包使用winScp傳到服務(wù)器的
/www/server/userCenter-backend目錄下 -
使用命令啟動(dòng)
java -jar ./UserCenter-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod-
但是這樣啟動(dòng)有問題，窗口無法退出
-
所以使用
nohup java -jar ./UserCenter-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &這個(gè)命令 -
使用
jps查看所有已經(jīng)運(yùn)行的java程序 
-
如果沒有權(quán)限 執(zhí)行
chmod a+x 你的項(xiàng)目文件 -
部署完成
-
打開服務(wù)器配置安全組 打開后端項(xiàng)目的端口
-
寶塔部署
前端
打卡寶塔面板
-
點(diǎn)擊根目錄進(jìn)去選中所有文件刪除他的默認(rèn)文件
-
然后打開前端構(gòu)建好的dist,將這個(gè)文件夾下的所有文件拖到根目錄下 點(diǎn)擊上傳
-
然后在瀏覽器輸入ip地址 前端訪問成功
后端
將后端的jar包傳到寶塔的java項(xiàng)目
停止tomcat服務(wù)，
修改配置點(diǎn)擊保存
項(xiàng)目無法啟動(dòng)
先關(guān)閉tomcat服務(wù)，因?yàn)閠omcat服務(wù)占用了8080端口，也可修改項(xiàng)目啟動(dòng)的端口，但是修改端口比較麻煩
springboot項(xiàng)目部署寶塔提示成功，實(shí)際沒有啟動(dòng)_關(guān)于#springboot項(xiàng)目部署寶塔提示成功,實(shí)際沒有啟動(dòng)#的問題,如何解決_古木2019的博客-CSDN博客springboot項(xiàng)目部署寶塔提示成功，實(shí)際沒有啟動(dòng)_關(guān)于#springboot項(xiàng)目部署寶塔提示成功,實(shí)際沒有啟動(dòng)#的問題,如何解決
注意：在項(xiàng)目執(zhí)行命令中使用 java -jar xiangmu.jar --spring.prolifes.active=prod 在項(xiàng)目配置文件中設(shè)置線上項(xiàng)目的數(shù)據(jù)庫(kù)等配置
在寶塔面板創(chuàng)建數(shù)據(jù)庫(kù)，給配置文件中配置的是用寶塔面板創(chuàng)建的數(shù)據(jù)庫(kù)，并且輸入設(shè)置的用戶名和密碼
跨域問題
跨域問題解決
瀏覽器為了用戶的安全，僅允許向 同域名、同端口 的服務(wù)器發(fā)送請(qǐng)求。
如何解決跨域？
最直接的方式：把域名、端口改成相同的
添加跨域頭
讓服務(wù)器告訴瀏覽器：允許跨域（返回 cross-origin-allow 響應(yīng)頭）
1. 網(wǎng)關(guān)支持（Nginx）
直接將這段代碼賦值到前端項(xiàng)目的nginx配置中
# 跨域配置
location ^~ /api/ {proxy_pass http://127.0.0.1:8080/api/;add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers '*';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}
}
2. 修改后端服務(wù)
方式一：
配置 @CrossOrigin 注解
可以添加允許夸域的ip 域名 可以是一個(gè)也可以是一個(gè)數(shù)組，
屬性：origins;允許跨域的域名 ip
method：允許跨域的方法
RequestMethod.GetRequestMethod.Post……
在controller上添加這個(gè)注解，
@CrossOrigin(origins='http://xxxx')
@RestController
public class UserControler{//項(xiàng)目接口
?
}方式二：
添加 web 全局請(qǐng)求攔截器
@Configuration
public class WebMvcConfg implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {//設(shè)置允許跨域的路徑registry.addMapping("/**")//設(shè)置允許跨域請(qǐng)求的域名//當(dāng)**Credentials為true時(shí)，**Origin不能為星號(hào)，需為具體的ip地址【如果接口不帶cookie,ip無需設(shè)成具體ip】.allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")//是否允許證書 不再默認(rèn)開啟.allowCredentials(true)//設(shè)置允許的方法.allowedMethods("*")//跨域允許時(shí)間.maxAge(3600);}
}方式三：
定義新的 corsFilter Bean，參考：SpringBoot設(shè)置Cors跨域的四種方式 - 簡(jiǎn)書前言：CorsFilter / WebMvcConfigurer / @CrossOrigin 需要SpringMVC 4.2 以上的版本才支持，對(duì)應(yīng)SpringBoot 1...https://www.jianshu.com/p/b02099a435bd
至此 使用寶塔的方式已經(jīng)全部部署完畢，可以正常訪問
這里記一個(gè)踩坑 就是關(guān)于前端頁(yè)面注冊(cè)跳轉(zhuǎn)的問題
因?yàn)槭怯昧薃nt Design Pro生成的頁(yè)面
本來我的注冊(cè)跳轉(zhuǎn)按鈕是使用<a>標(biāo)簽來超鏈接到注冊(cè)頁(yè)面實(shí)現(xiàn)的，這樣子做在本地運(yùn)行沒有任何問題，因?yàn)樗匈Y源都是本地的，所以不存在什么問題
但是到了線上，通過a標(biāo)簽來超鏈接的話，資源是要在網(wǎng)上進(jìn)行獲取的
所以修該為L(zhǎng)ink 組件跳轉(zhuǎn)，完美解決問題
查了一下Link組件和a鏈接的區(qū)別：
Docker部署
暫時(shí)沒做-以后