前端小白的服务器配置

93 阅读3分钟

前言

以下内容都是我通过查看视频和百度资料收集的,你要问我具体为什么这么做,抱歉我只能说我也不知道。但我知道这么做一定能够成功。 那为什么要发这篇文章呢?因为我看了掘金好多博主无私分享的内容,心中想着也要分享一点什么。

服务器

这里我选择的是腾讯云,安装的时候选择CentOS 7.6不要选择CentOS 8.0,CentOS 8.0安装会失败。至于我为什么会知道CentOS 8.0安装会失败,原因是当时年轻在自己的博客中记录了所有的从安装到部署的步骤,里面我连服务器ip地址、登录密码都没有改,被一个坏种将我数据库表中所有内容都修改为了颜色网站地址,后面我重装了系统选择的就是CentOS 8.0。

域名

拥有自己的服务器后前往域名注册这边腾讯云官网会有一系列引导,按照引导完成注册并备案就可以了

Java安装

下载jdk8(注意这里需要安装linux版本的jdk)这里我用的是jdk-8u301-linux-x64.tar这个版本。

通过Xftp在服务器对应目录下新建文件夹package并将jdk放到文件夹下

通过Xshell执行以下命令

前往Xftp建立的文件下: cd /home/package/

解压Java安装包: tar -zxvf jdk-8u301-linux-x64.tar.gz

修改Java安装包名称:mv jdk1.8.0_301 jdk1.8

将Java安装包移动到/usr/local/:mv jdk1.8 /usr/local/

前往/usr/local/:cd /usr/local/

编辑配置文件:vim /etc/profile

Java环境变量配置

按i可以进行内容输入,移动到文件最后新开一行添加以下内容(添加完成后按esc并输入:wq保存退出)

export JAVA_HOME=/usr/local/jdk1.8  
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib  
export PATH=$JAVA_HOME/bin:$PATH

刷新Java环境变量配置:source /etc/profile

安装docket

设置仓库

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

设置阿里云仓库

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

安装最新版本docker

sudo yum install docker-ce docker-ce-cli containerd.io

启动docker

systemctl start docker

判断docker是否安装成功

docker version

Docker 需要用户具有sudo权限,为了避免每次都输入sudo可以把用户加入docker用户组

sudo usermod -aG docker $USER

设置docker开机自启

systemctl enable docker

阿里云镜像加速

sudo mkdir -p /etc/docker  
sudo tee /etc/docker/daemon.json <<-'EOF'  
{  
"registry-mirrors": ["https://3n4m4jry.mirror.aliyuncs.com"]  
}  
EOF  
sudo systemctl daemon-reload  
sudo systemctl restart docker

docket下安装MySQL

拉取mysql

docker pull mysql:5.7

安装mysql镜像

docker run -p 3306:3306 --name mysql \  
-v /mydata/mysql/log:/var/log/mysql \  
-v /mydata/mysql/data:/var/lib/mysql \  
-v /mydata/mysql/conf:/etc/mysql \  
-e MYSQL_ROOT_PASSWORD=设置你的mysql密码 \  
-d mysql:5.7

安装nginx

安装依赖和相关库:yum -y install gcc-c++ zlib-devel openssl-devel libtool

移动至/usr/local目录:cd /usr/local

下载nginx安装包:wget http://nginx.org/download/nginx-1.14.0.tar.gz

解压nginx安装包:tar -zxvf nginx-1.14.0.tar.gz

移动至nginx-1.14.0目录:cd nginx-1.14.0

添加配置:./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

安装:make && make install

移动至/usr/local/nginx/conf目录:cd /usr/local/nginx/conf

前往腾讯云申请免费ssl证书申请完成后,下载ssl证书选择Nginx(适用大部分场景),然后通过Xshell打开Xftp默认会在/usr/local/nginx/conf 目录下将下载的证书:fantongxue.top_bundle.crtfantongxue.top.key放到该目录下

修改nginx配置:vim nginx.conf 添加一个443 server 和 修改 80 server (修改完成后按esc并输入:wq保存退出)

server {  
  listen 443 ssl;  
  server_name fantongxue.top;  
  ssl_certificate fantongxue.top_bundle.crt;  
  ssl_certificate_key fantongxue.top.key;  
  ssl_session_timeout 5m;  
  ssl_protocols TLSv1.2 TLSv1.3;  
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;  
  ssl_prefer_server_ciphers on;  
  location / {  
    root /home/hexo/dist;  
    index index.html index.htm;  
    try_files $uri $uri/ /index.html;  
  }  
  location /admin {  
    alias /home/admin/dist;  
    index index.html;  
    try_files $uri $uri/ /admin/index.html; #解决页面刷新404问题  
  }  
  location /api {  
    proxy_pass http://你的服务器ip:8080/;  
  }  
}  
  
server {  
  listen 80;  
  server_name fantongxue.top;  
  return 301 https://$host$request_uri;  
  location / {  
    root html;  
    index index.html index.htm;  
  }  
  error_page 500 502 503 504 /50x.html;  
  location = /50x.html {  
    root html;  
  }  
}

移动至目录: cd /usr/local/nginx/sbin

启动nginx: ./nginx

跨域配置

Java配置

import com.learn.interceptor.JwtInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
    /**
     * 添加拦截器
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //拦截路径可自行配置多个 可用 ,分隔开
        registry.addInterceptor(new JwtInterceptor())
                .addPathPatterns("/**");

    }
    /**
     * 跨域支持
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(
                        "https://www.fantongxue.top:8080",
                        "https://www.fantongxue.top:80",
                        "https://www.fantongxue.top",
                        "https://fantongxue.top:8080",
                        "https://fantongxue.top:80",
                        "https://fantongxue.top",
                        "http://www.fantongxue.top:8080",
                        "http://www.fantongxue.top:80",
                        "http://www.fantongxue.top",
                        "http://fantongxue.top:8080",
                        "http://fantongxue.top:80",
                        "http://fantongxue.top",
                        "http://你的服务器ip地址:8080",
                        "http://你的服务器ip地址:80",
                        "http://你的服务器ip地址",
                        "http://localhost:8080", // 本地测试api端口
                        "http://localhost:9527", // 本地测试前端项目端口
                        "http://localhost:9528", // 本地测试前端项目端口
                        "http://localhost:9529"  // 本地测试前端项目端口
                        ) 
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH", "OPTIONS", "HEAD")
                .maxAge(3600 * 24);
    }
}

前端vue项目中需要在axios开启 withCredentials: true

const service = axios.create({  
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url  
withCredentials: true, // send cookies when cross-domain requests  
timeout: 5000 // request timeout  
})