部署

參考文章：如何部署網(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)頁文件部署在幾臺(tái)服務(wù)器上。那現(xiàn)在我們要開發(fā)上線一個(gè)新功能，應(yīng)該怎么做呢？老弟小阿巴問：寫好代碼后，直接更新服務(wù)器上的網(wǎng)頁文件么？我一巴掌抽過去：那萬一你的代碼有 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ù)庫，獨(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ù)庫的地址

后端主要配置

• 依賴的環(huán)境地址

  • 數(shù)據(jù)庫地址

  • 緩存地址

  • 消息隊(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ù)庫，

  • 
  • 

  • 最后使用Navcate連接遠(yuǎn)程數(shù)據(jù)庫

    • 輸入剛剛創(chuàng)建數(shù)據(jù)庫填入的用戶名和密碼連接

• 在遠(yuǎn)程連接工具中進(jìn)入MySQL客戶端

  • 執(zhí)行SQL語句

    use mysql;
    -- 查看MySQL數(shù)據(jù)庫編碼方式
    show variables like 'character%';
    -- 如果數(shù)據(jù)庫默認(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即可看到前端頁面

    問題：

    寶塔面板無法打開報(bào) nginx Not Found 404 問題：

    寶塔面板404 Not Found解決方案_燦燦的金的博客-CSDN博客查看全部的網(wǎng)址，然后就行了。這是因?yàn)闆]有輸入安全的網(wǎng)址。_寶塔面板404https://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)#的問題,如何解決https://blog.csdn.net/qq_38188762/article/details/128390864

注意：在項(xiàng)目執(zhí)行命令中使用 java -jar xiangmu.jar --spring.prolifes.active=prod 在項(xiàng)目配置文件中設(shè)置線上項(xiàng)目的數(shù)據(jù)庫等配置

在寶塔面板創(chuàng)建數(shù)據(jù)庫，給配置文件中配置的是用寶塔面板創(chuàng)建的數(shù)據(jù)庫，并且輸入設(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.Get RequestMethod.Post……

在controller上添加這個(gè)注解，

@CrossOrigin(origins='http://xxxx')
@RestController
public class UserControler{
    //項(xiàng)目接口
?
}

方式二：

添加 web 全局請(qǐng)求攔截器

@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
 
 ? ?@Override
 ? ?public 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)于前端頁面注冊(cè)跳轉(zhuǎn)的問題

因?yàn)槭怯昧薃nt Design Pro生成的頁面

本來我的注冊(cè)跳轉(zhuǎn)按鈕是使用<a>標(biāo)簽來超鏈接到注冊(cè)頁面實(shí)現(xiàn)的，這樣子做在本地運(yùn)行沒有任何問題，因?yàn)樗匈Y源都是本地的，所以不存在什么問題

但是到了線上，通過a標(biāo)簽來超鏈接的話，資源是要在網(wǎng)上進(jìn)行獲取的

所以修該為Link 組件跳轉(zhuǎn)，完美解決問題

查了一下Link組件和a鏈接的區(qū)別：

Docker部署

暫時(shí)沒做-以后文章來源地址http://www.zghlxwxcb.cn/news/detail-683071.html

到了這里，關(guān)于前后端項(xiàng)目部署上線詳細(xì)筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！