域名+服务器+Nginx+宝塔使用SSL证书设置HTTPS
前言在我的前面文章里，有写过一篇文章
linux服务器+宝塔重新部署别人可访问的网站
在这篇文章，有教学怎么使用宝塔和买的服务器的公网IP，以及教怎么打包vue和springboot去部署不用域名的网站让别人访问
那么，这篇文章将在这个基础上来教各人怎么去搭建通过域名访问的网站
项目展示
在我的项目中，我已经乐成的搭建出了https的网站
HTTPS谈天室网站
点开之后正常的访问到我们的项目
https://i-blog.csdnimg.cn/direct/8abaa52520a44c40b6e3993b85b1e1ba.png
以及可以或许乐成的调用后端
https://i-blog.csdnimg.cn/direct/591288dabfa64be4aa8f24c991a95ecf.png
https://i-blog.csdnimg.cn/direct/9b6597cd283e4596af8bccb10c448de8.png
这个项目在很长时间内我都会挂载部署,我买的阿里云的域名和服务器，我可以通过电脑端正常的访问该链接，但是手机端不行，问了阿里的客服说是由于网站没有【存案】导致
预备工作
为了可以正常的搭建出可以访问域名的https协议的网站，我们在正式开始前须要做一些预备工作
服务器
要部署域名的当然须要服务器，可以根据本身须要进行购买即可
域名
首先你须要买一个域名，由于我的服务器和域名都是在阿里云买的，因此用阿里云进行演示
首先根据本身须要申请一个域名
https://i-blog.csdnimg.cn/direct/910ba36abfa94f15b33e1c493824c9d3.png
购买完之后，须要实名认证,点击【信息模板】进行登记信息
https://i-blog.csdnimg.cn/direct/50ed04774e3746bea7fdc1110c50cc74.png
https://i-blog.csdnimg.cn/direct/f7d5b33c126944239563df96bf0b7789.png
按照本身实际信息填写提交即可
等待认证乐成
https://i-blog.csdnimg.cn/direct/326022182cc447d2a6dca9a686ea2939.png
将你的【信息模板】关联到你的域名即可
域名解析
https://i-blog.csdnimg.cn/direct/7f194c8e39194c17ab55c0edc181f046.png
选择你的域名，右边有一个解析按钮,点击之后默认会有一个_dnsauth的解析，这个不用动
https://i-blog.csdnimg.cn/direct/dda5bb22e9da49dd92868e8a3affcab7.png
然后我们新增一个泛解析
以我申请的域名springsso.top为例，泛解析的意思是你可以添加恣意前缀解析到你的域名，如
chat.springsso.top
student.springsso.top
hotel.springsso.top
…
https://i-blog.csdnimg.cn/direct/876167f8a804433487d88625130095b9.png
泛解析
记录范例: A
主机记录: *
记录值: 你服务器的公网IP
TTL:默认10
添加一个公网IP解析
https://i-blog.csdnimg.cn/direct/40a9f384c3b3408b8036f8d05302b4ed.png
记录范例: @
主机记录: *
记录值: 你服务器的公网IP
TTL:默认10
DNS拨测
同样是这个界面，有一个生效检测
点击可以跳转到DNS拨测中心验证你的域名解析有没有生效
https://i-blog.csdnimg.cn/direct/c8850c7ead6e4597ac8d85dd6fdb6fcc.png
https://i-blog.csdnimg.cn/direct/aaa7c2276dcd46fc8eb19f3a35fea5e7.png
当你能看到你的域名可以解析到你的公网IP值，即代表你的域名解析乐成!悬停在解析结果IP可以检察解析的IP
SSL
初期我们可以申请免费的SSL证书，搜刮数字证书管理服务
https://i-blog.csdnimg.cn/direct/81010a9c944e4f6b972486f3b9d101b6.png
找到【SSL证书管理】下的【个人测试证书（原免费证书）】，点击创建证书
https://i-blog.csdnimg.cn/direct/66c6c66592ac419586b2638a9f18b378.png
输入你的域名,然后点击确认,一样平常证书创建下发的话，慢的情况下只须要十多分钟
如果你隔了很久没有生效，请在右边解析一下（刚刚开始须要解析到本身的域名）
当生效之后，我们点击更多，找到【下载】
https://i-blog.csdnimg.cn/direct/d1366781c5ac4fc7a4e34a11c429a6fc.png
我们须要获取到两个证书
Nginx: 用于Nginx部署使用
JKS: 用于后端springboot开启HTTPS使用
安全组和端口
安全组是有须要注意的事项的，我在这一步卡了很久，安全组须要和我们的服务器实例进行地区的关联，如我的实例是:
https://i-blog.csdnimg.cn/direct/defd145588524d83810bdca90a1faf77.png
他的地区是华南2（河源）
但是在我没有创建任何安全组的情况下，不知道为什么自动给我创建了3个安全组
https://i-blog.csdnimg.cn/direct/af0e36cb569049d98d6773c18cbca4fe.png
你只有设置开放了对应地区的安全组的收支站端口，才能生效
针对端口，我们须要开放这么几个端口
❤️你须要部署的后端的端口
❤️开放8080以部署tomcat
❤️开放80端口
❤️开放443端口
❤️如果你用的是宝塔进行部署，宝塔的【安全】的【体系防火墙】也须要开放对应端口
宝塔
怎么按照宝塔不须要多言，可以参考我最上面的文章链接，也可以百度
nginx
登录到宝塔之后,点击【软件商店】，检索nginx进行下载
https://i-blog.csdnimg.cn/direct/08b46e3e1c204b63be031bb528b13918.png
tomcat
同样在【软件商店】下载tomcat
https://i-blog.csdnimg.cn/direct/66a4fa69e7c640ebac79e51de48d2996.png
SpringBoot项目设置
打包方式我们同样可以参考我的上篇文章，或者参考百度即可
然后我们须要拿到下载的JKS的证书,放到你项目标resources文件夹下
https://i-blog.csdnimg.cn/direct/d3aa8817ce374093a67466c3a564f8c9.png
然后在application.yml新增设置如下:
server:
port: 8082 #端口
servlet:
context-path: /chatEnd # 项目主路由
ssl: #ssl配置
enabled: true# true为开启https
#key-alias: alias-key # 别名(可以不进行配置)
# 保存SSL证书的秘钥库的路径
key-store: classpath:www.springsso.top.jks # ssl证书位置，如果放在resources文件夹下就是这样配置
key-password: 私钥密码
#key-store-password: 证书密码
key-store-type: JKS # 证书类型，选择JKS
上述设置中
key-password是私钥密码
key-store-password 是证书密码。
如果这两个密码相同的只设置一个即可，由于tomcat默认先用keyStore的pass去解私钥。
（PS：如果你使用阿里云上的免费SSL证书，下载jks格式的证书的时间，只有一个密码，是证书的密码）
我的项目中证书设置如下（密码看到无所谓，每次证书下载密码会随机）：
https://i-blog.csdnimg.cn/direct/e115996f4211454d8b86ea197b470206.png
然后打包成jar包,上传到服务器，恣意位置，记住路径即可
找到【网站】的【java项目】，【添加Java项目】
https://i-blog.csdnimg.cn/direct/1f0848fe136d452083655434a45fe9f9.png
https://i-blog.csdnimg.cn/direct/c2974ce0508743619e5a0c7ac422c797.png
jar路径即你打包之后的项目文件路径,项目JDK根据本身实际项目进行调解，其他默认即可
这个时间你的项目运行是https的，只能用https进行调用接口
vue前端设置
vue项目，须要映射到我们的域名，也就是我们全部涉及到ip的，全部要更换为域名
如我的axios的封装js
import axios from 'axios'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service = axios.create({
baseURL: 'https://springsso.top/chatEnd',
timeout: 30000
})
service.interceptors.request.use(config => {
return config
},
error => {
return Promise.reject(error)
}
)
service.interceptors.response.use(
res => {
return res
}
);
export default service
config下的index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
target: "https://springsso.top/chatEnd",
changeOrigin: true,
secure: false,
pathRewrite: {
'^/': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
然后执行npm run build打包,放置到你tomcat的webapps文件夹下
通过【软件商店】的【已安装】，可以找到tomcat安装位置,其他软件同理
https://i-blog.csdnimg.cn/direct/ef7458f315ed4a7fb85061a25795c725.png
https://i-blog.csdnimg.cn/direct/978ed69447ff426eb7c8615ec97ab395.png
我这里创建了一个chat文件夹，里面放了前端打包文件,这个时间你已经可以通过tomcat访问到本身的前端项目了，链接为公网ip:8080/chat，但是前后端无法联通
数据库
找到【数据库】，根据本身实际的项目创建对应的数据库
https://i-blog.csdnimg.cn/direct/a26e9b52ca104592a7778463fc622585.png
我以MySQL为例,点击【添加数据库】
https://i-blog.csdnimg.cn/direct/89bfabc9502e44e892b7ebcd7541c08a.png
根据本身实际项目填写数据库名和用户名密码
保存之后，在【权限】修改数据库为全部人，这样你也可以本身的电脑用sql工具连接你的数据库编辑建表等
https://i-blog.csdnimg.cn/direct/a4445e06a60b45159077044920a7517a.png
nginx设置
将下载的nginx版本的SSL证书上传到你的服务器，可以恣意位置，记住位置即可
同样在【软件商店】的【已安装】,定位到已经按照的nginx的位置，找到conf文件夹下的nginx.conf文件
我们须要在里面新增server设置
在http{}的结构下新增如下设置
server {
listen 443 ssl;
server_namespringsso.top;
root /home/data;
ssl_certificate /www/server/nginx/conf/www.springsso.top.pem;# nginx版本的ssl证书位置，根据实际调整
ssl_certificate_key/www/server/nginx/conf/www.springsso.top.key;# nginx版本的ssl证书位置，根据实际调整
ssl_session_cache shared:SSL:1m;
ssl_session_timeout5m;
ssl_ciphersHIGH:!aNULL:!MD5;
ssl_prefer_server_cipherson;
location / {
root html;
indexindex.html index.htm;
}
location /chat/{
index index.html;
#需要反代的采集服务，具体的服务器配置在nodes对应的ip服务器中，实际公网IP根据自己项目调整
proxy_pass http://公网ip:8080/chat/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 4g;
client_body_buffer_size256k;
}
location /chatEnd/ {
proxy_pass https://公网ip:8082/chatEnd/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_ssl_session_reuse off;
proxy_redirect off;
client_max_body_size 4g;
client_body_buffer_size256k;
# WebSocket 相关配置，如果你的项目有webSocket，需要新增这个
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
该设置实际是利用了反向署理，将在访问域名反向署理访问到启动在tomcat的项目
然后找到【软件商店】的安装的nginx进行重启，你就可以用域名访问到项目了
以我的为例，我可以用https://springsso.top/chat访问到项目
如果你须要使用泛解析，可以使用如下设置:
server {
listen 443 ssl http2;
server_namechat.springsso.top;
root /home/data;
ssl_certificate /www/server/nginx/conf/www.springsso.top.pem;
ssl_certificate_key/www/server/nginx/conf/www.springsso.top.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout5m;
ssl_ciphersHIGH:!aNULL:!MD5;
ssl_prefer_server_cipherson;
ssl_protocols TLSv1.2 TLSv1.3;
location / {
proxy_pass http://47.120.3.49:8080/chat/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 4g;
client_body_buffer_size256k;
}
}
那么这个设置你可以使用域名:
https://chat.springsso.top进行访问项目，须要注意的是，如果须要使用泛解析，那么你的SSL证书须要设置解析的域名有泛解析的域名,
例:*.springsso.top
结语
以上就是设置域名访问和https可信证书的教程,有遗漏会更新
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]