首页 前端知识 创建网站教程:服务器环境搭建(MySQL Jdk Nginx...),前后端项目部署(技术栈:SSM Vue),域名 备案【全网最简单】

创建网站教程:服务器环境搭建(MySQL Jdk Nginx...),前后端项目部署(技术栈:SSM Vue),域名 备案【全网最简单】

2024-08-18 22:08:45 前端知识 前端哥 971 715 我要收藏

本文写于1年前,当时建站经验不够丰富,文章逻辑混乱。经过一年的沉淀,已帮助近20人搭建了属于他们自己的网站,总结出了颇多经验,带着这些经验我希望能重写这篇文章,帮助更多的小伙伴,搭建属于自己的网站。

本文后端和前端的技术栈主要是:SpringBoot+Vue。主要以我部署的个人网站:www.pbjlovezjy.com 为例,来讲解一下如何搭建网站。

我花了5天时间,开发了一个在线学习的小网站-CSDN博客

本文主要分为以下四个部分讲解:

一、服务器准备

1.购买服务器(你首先要有一个自己的云服务器)。

2.远程登录服务器(登录到服务器上进行基础配置,为项目运行搭建环境)。

二、运行环境搭建

3.安装必备软件(安装Jdk、MySQL、Nginx、Redis、Tomcat等软件)。

三、项目部署

4.运行后端文件(这里以Java项目为例,在IDEA中先通过Maven把项目项目打成jar包,然后放到服务器中输入命令,项目即可作为一个进程被运行)。

5.运行前端文件(这里以Vue项目为例,在VsCode中输入npm run build将前端项目打包,部署到服务器的Nginx上)。

四、进阶篇

主要讲解:1.购买域名(平时我们访问网站是通过域名,如:www.xxxx.com)。2.域名解析(把域名映射到你的网站前端,这样访问域名才会跳转到你的网站)。3.备案(备案的目的是让网站能通过域名访问)。4.申请SSL证书(让网站变安全,不然不安全状态会被限制访问,给用户不好印象^_^)。

【本文全链路讲解如何部署一个网站,喜欢的朋友记得点赞+收藏,如有建站方面的困惑欢迎加文末微信咨询(有偿)】

一、服务器准备

1.购买服务器

首先看地域参数,要选择离使用服务器的人近的地域。如果是你个人使用就选离你近的地域。像我在厦门,深圳离我最近,我就选深圳。

给大家解释一下一般的2核2G的服务器是什么意思:

2核指的是CPU的内核数,2G指的是内存的容量,一般这种服务器的存储容量是40G,所以整体来说搭建一个个人网站是绰绰有余了!

推荐操作系统选择Linux版本,像我喜欢用Ubuntu 18(Ubuntu可以理解为Linux的可视化桌面版本)。

原因是:Linux网上教程很多,出了问题能查资料解决,用windows的话有时候找不到资料,解决不了问题。

买服务器可以去阿里云或者腾讯云看看,有学生优惠:

最近阿里云出了一个99元服务器,感觉很nice。

2.远程登录服务器

 可以用SSH连接终端去连接: 

也可以用mobatxterm终端访问:

页面如下,左边是文件区,右边就是命令行:

如果密码有误或者不知道密码可以通过下面方法进行重置:

如果远程登录不上服务器,可以尝试用workbench,方法如下:

点击远程连接:

选择workbench连接:

然后用户名:root,密码输入刚刚自己重置的。

 然后就可以正常进入到Workbench的界面:

出错:如果登录不成功:

进入VNC连接实例,遇到一个问题如何使用VNC?

首先要查看自己实例的操作系统:

如果是Linux系统,只需要在用户名输入:root,然后输入自己的密码即可:

 输入下面这行代码:

cat /etc/ssh/sshd_config

 可以看到这行的设置是:no,所以我们要更改为:yes

先输入下面这行代码:

vi /etc/ssh/sshd_config

按i键进入到插入模式,找到PasswordAuthentication,将no删除,写上yes:

然后按Esc键,输入:

:wq

 然后重启SSHD服务:

service sshd restart

二、运行环境搭建

1.下载配置nginx

网上说可以用yum来下载

yum install nginx

我试了是失败的,我直接用apt install nginx进行下载。

下载完后直接输入

nginx

 这个时候可以直接通过公网ip访问到nginx:

然后你到/etc/nginx的文件夹下,输入vi nginx.conf,去看看具体配置:

主要是看root,找到后面那个文件:

可以看到在html下有一个index.html,这个index.html的内容就是你用公网ip去访问网页时出现的内容:

现在我们在桌面上创建一个home.html文件,把下面准备好的内容复制进入:

<!DOCTYPE html>
<html>
<head>
    <title>我的HTML页面</title>
</head>
<body>
    <h1>欢迎来到我的HTML页面</h1>
    <p>这是一个示例HTML页面。</p>
    <p>你可以在这里添加更多的内容。</p>
</body>
</html>

就像下面这样: 

然后访问:公网ip/home.html就可以看到内容了: 

我一开始出现了一个小问题,哦的nginx.conf文件下没有关于root的配置,其实它是放到了etc/nginx/sites-available下的default里,这就很坑。

之前我看网上说一直以为html文件是存储usr/share/nginx/html下,这其实是错误的,存储的地方其实是var/www/html下:

上面这一点希望初学者注意。

Nginx—在linux的ubuntu系统上的安装使用_ubuntu nginx-CSDN博客

2.下载配置jdk

网盘链接如下:https://pan.baidu.com/s/15JpnE9LLTQy92L1ZeuUN9A?pwd=1234 
提取码:1234

先在usr/local下面创建jdk文件夹:

mkdir jdk

然后把网盘里的jdk文件放到usr/local/jdk目录里:

然后输入下面命令进行解压:

tar -zvxf jdk-8u171-linux-x64.tar.gz

解压后会出现jdk1.8.0_171这个文件: 

输入下面代码,进入配置文件:

vim /etc/profile

在文末补上下面这5行代码:

#set java environment
export JAVA_HOME=/usr/local/jdk/jdk1.8.0_171
export JRE_HOME=/usr/local/jdk1.8.0_171/jre 
export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH 
export PATH=$JAVA_HOME/bin:$JRE_HOME/bin:$JAVA_HOME:$PATH

:wq!退出来后,用下面命令生效:

source /etc/profile

java -version成功出现java版本。

完整如下:

我们也可以写一个java程序稍微验证一下(选做):

vim haha.java

代码如下: 

先javac进行编译,然后用java haha就可以执行函数输出内容了:

3.安装Mysql

参考下面这篇博客,进行数据库安装:

数据库的使用也是参考下面这篇博客:

Ubuntu Mysql 安装下载最新教程,附详细图解,持续更新_ubuntu下载mysql-CSDN博客

要确保mysql在开始时被卸载干净,参考下面博客:

【云服务器】阿里云服务器部署web项目前的准备(安装Nginx,jdk,Tomcat,MySQL)_阿里云怎么部署tomcat-CSDN博客

mysql可以正常启动: 

如果想要通过Navicat访问mysql数据库需要一些操作:

首先要明确一点,服务器里的mysql初始设定是只能监听本地回环的地址(127.0.0.1),这种“自闭环”的模式导致远程的主机不能直接访问Mysql服务器,只有服务器本身能访问这个mysql,这也是一开始没能连上数据库的原因。

接下来几个步骤帮你用Navicat连接上数据库:

1.首先关闭服务器的防火墙:sudo ufw disble

2.然后要开启服务器的安全组端口3306

3.进入到mysqld.cnf文件里:

vim /etc/mysql/mysql.conf.d/mysqld.cnf

更改bind-address的值,改为0.0.0.0:

这样可以破坏自闭环条件,使得外部的所有计算机可以访问服务器里的mysql,如果只想某一台计算机可以访问,也可以只写需要访问的计算机的ip地址。

4.下面这步是最为重要的,要赋予某个数据库用户名(比如root)以通行的权限:

GRANT ALL PRIVILEGES ON *.* TO '可以放行的数据库用户名'@'mysql所在服务器的ip地址' IDENTIFIED BY '密码' WITH GRANT OPTION;

 下面是一个例子:GRANT ALL PRIVILEGES ON *.* TO 'root'@'120.78.194.33' IDENTIFIED BY '@Panbinjie201314' WITH GRANT OPTION;

其中root是数据库里的用户名是mysql -u root的root。

120.78.194.33是我的服务器ip,当然不是真的ip。

然后密码要求一定要包含特殊字符比如@,然后是大写字母比如P,然后是小写字母比如anbinjie,然后是数字201314,这四者缺一不可!当然这个密码不一定和你数据库的登录密码相同。

5.Navicat点击新建连接,要选择对应运营商的对应数据库类型:

特别注意下面的密码,填的是第4步设置的那个密码,如果和数据库密码不同,千万不能填数据库的密码:

然后就连接成功了:

如果出现像下面的Access denied那么说明Mysql数据库是没问题的,肯定是上面权限配置有问题。

如果出现的是其它错误,那你就要好好检查一下mysql数据库是不是没问题的。

三、项目部署

1.Java项目打包

在IDEA右侧的Maven下的Lifecycle中点击package进行项目打包

打包后的文件会在target文件夹里面:

推荐从外部文件夹复制:

2.Vue项目打包

在Vue项目中在控制台输入:npm run build 进行项目打包。

打包成功后会在目录下出现一个dist文件:

从外部文件夹中复制:

3.建议

建议大家像我一样做好版本控制,

4.后端部署

输入下面的命令可以看当前服务器中正在运行的Java程序:

ps -ef | grep java

今天是5月21可以看到我2月24日有运行一个后台程序: 

 我输入kill+PID号 将其停止:

把准备好的jar包放到喜欢的目录下,我一般喜欢放在/usr/local 下面:

输入下面的命令可以在前台执行Java文件,注意要把/path/to/your/project.jar替换成你自己的:

java -jar /path/to/your/project.jar

如下图启动的过程和在IDEA里是一样的,你甚至可以看到我这里报了个数据库连接的错误,这样可以方便调试排查问题,等排查完问题再转为后台运行: 

Ctrl+Z可以停止,这里说一下,我刚刚在数据库迁移的时候遇到的是字符格式编码的问题,可以在下面这个地方修改:

改完BUG之后重新运行,可以看到项目已经运行成功:

在项目能成功运行之后,输入下面的命令可以在后台执行Java文件,注意要把/path/to/your/project.jar替换成你自己的:

nohup java -jar /path/to/your/project.jar &

如下图我输入完运行jar包的代码,项目就开始在后台运行: 

nohup java -jar /usr/local/blog-server-0.0.1-SNAPSHOT.jar &

5.前端部署

我习惯把前端文件放到/home/html 这个路径下,只需要把文件拖到目录下即可:

如下图输入nginx -t 可以看到文件编译没问题:

然后输入nginx -s reload相当于运行这个前端项目:

此时就可以通过域名访问网站了:

二、进阶篇

第1步:购买域名

先在阿里云企航界面中搜索想要的域名,如果未被注册可直接购买。

阿里云域名查询与购买界面

第2步:备案

        现在的网站都必须要经过备案才能够被搜索到。在申领到域名之后,差不多要过个1-2天才能进行备案,因此可以先把域名和服务先准备好。

        以阿里云为例,点击ICP备案按照指定步骤操作即可进行备案:

        备案的流程一般是:个人先填写一份个人信息,包括身份证验证和个人身份验证等流程,然后阿里云进行审批(差不多当天即可完成),然后会发短信我们只需要验证即可,然后管局会进行审核...整个流程下来差不多要10天左右

所以大家刚入门的时候,可以在购买域名后事先进行备案,然后慢慢再研究如何使用服务器,部署网站。

第3步:域名解析

备案完之后,接下来就需要解析域名,鼠标放在左上角,点击域名

点击解析:

点击新手引导:

填入公网IP地址,点确定即可解析完成:

第4步:申请免费SSL证书

申请免费的SSL证书,需要注意阿里云自2022年12月之后已不能领取免费SSL证书:

SSL/TLS 数字证书白金合作伙伴 - 提供更好的服务与支持 - BitCert

注意购买年限处选择90天证书,此时的价格就是0:

 提交之后会显示待验证状态:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16040.html
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!