阿里云服务器配置说明

  • 时间:
  • 来源:互联网
  • 文章标签:

阿里云服务器配置说明

step1.买一个阿里云的服务器


  • 1.1装一个centos的系统
    在这里插入图片描述

  • 1.2实例中点击进入远程连接(密码:1****1)
    在这里插入图片描述
    在这里插入图片描述

  • 1-3远程连接

    • cd / 到根目录下
    • cd ~ 到默认路径home

在这里插入图片描述

step2.终端连接


  • 2-1:打开终端

  • 2-2:如果是阿里云服务器是新装,如下图

    • ssh root @服务器公网地址
    • yes确定连接
    • 输入服务器密码
      add
  • 2-2:如果老本新装有可能是这个界面

    • vim 进入这个known_hosts文件
  • 选中上面的文字 按 dd键 清除 ->esc->:wq退出vim的编辑模式

  • 重新连接阿里云服务器 ssh @root 公网地址

  • exit 登出

在这里插入图片描述

在这里插入图片描述

  • 2.3创建密钥(连接服务器更方便)

    • 在本机上:

      • cd ~ 到默认路径下

      • ls -al 查看本机上所有的文件列表包含隐藏文件

      • cd .ssh/ 进入.ssh文件夹下

      • ls 查看文件夹内容

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 本机.ssh文件夹下生成名为pets-key密钥文件

    • ssh-keygen -t rsa -f 密钥名字

    在这里插入图片描述

    • 拷贝本地.ssh文件夹pets-key.pub 到服务器的默认路径下

      • scp pets-key.pub root@服务器公网地址:.(scp pets-key.pub root@47.99.100.141:.) 在这里插入图片描述
  • 登陆服务器查看文件 并将拷贝的文件追加到服务器端中的.ssh文件夹中的authorizes_keys中去(cat ~/pets-key.pub >> ~/.ssh/authorized_keys)

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 重启.ssh (systemctl restart sshd)
    在这里插入图片描述

  • 登出服务器 exit->.ssh文件夹中新建config->删除没有用的pets-key.pub文件->
    在这里插入图片描述

  • vscode 打开 config文件 配置文件信息
    在这里插入图片描述

在这里插入图片描述

  • 处理掉 .ssh文件夹中known_hosts服务器登陆的缓存信息
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 用密钥登陆服务器
    在这里插入图片描述

step3: 服务器安装nodej s环境


  • 服务器端 更新yum组件 (yum update -y)

  • 安装nodejs (yum install -y nodejs)

在这里插入图片描述
在这里插入图片描述

这里就安装完毕了!!

ps:

为了防止后续的no de j s版本更不上问题 这里借助了后端编程语言的脚本文件 保持no dejs 为最新的版本,以下是步骤

  • 卸载 nodejs

在这里插入图片描述

  • 拷贝到服务器默认路径(重新开启一个本地终端)
    在这里插入图片描述

  • 查看服务器总是不是有文件

在这里插入图片描述

  • (sh initNodejs.sh) 执行脚本,服务器中的脚本 不要放在服务器上运行 因为会很慢 我们放到网页端的阿里云远程连接中运行
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

等待安装完成…

vscode 中安装SFTP插件配置

{
    "name": "pets",
    "host": "47.99.100.141",//公网IP
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "remotePath": "/",//默认连接路径
    "uploadOnSave": true,//保存文件和服务器保持同步
    "ignore": [//忽略文件 不上传
          ".vscode",
          ".git",
          ".DS_Store"
      ],
      "syncOption": {//同步设置:删除文件时候 上传文件时候 都同步
          "delete": true,
          "update": true
      },
      "watcher": {//监听:更新本地和远端都保持一致
          "files": "**/*",
          "autoUpload": true,
          "autoDelete": true
      },
      "privateKeyPath": "~/.ssh/pets-key"//服务器密钥
}
  • 这里随便桌面上建立了叫node-vue-app一个项目文件 同时在服务器端home文件夹中建立frontend文件夹,这里建立随便通过FTP工具还是终端可以 frontend->ownsites(npm init --y)配置一个package.json放在这个文件夹中

  • vscode中拉取 远端文件

在这里插入图片描述

step4 安装nginx

现在访问公网IP是没有内容的,nginx主要的就是反向代理呈现出来

  • 服务器安装nginx(yum install -y nginx)
    在这里插入图片描述
    安装完成的Nginx文件夹中我们需要配置nginx.conf文件,安装完成的目录在/etc/nginx/nginx.conf
    因为内容太多,vim修改不便,所以我们可以拷贝nginx.conf到本地用编辑器修改,之后再放回去

  • 从服务器端拷贝到home/frontend/ownsites文件夹中去
    在这里插入图片描述

  • vscode中对nginx.conf做配置

server {
        listen       80 default_server;//默认的80端口
        server_name  localhost;
        location / {// ‘/’表示是根路径
        	#//当我访问我的公网ip 是80端口的时候,就会找到本地启动的一个127.0.0.1:5000 的这个项目
            proxy_pass http://127.0.0.1:5000; 
        }
        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
  • 将nginx.conf拷贝回/etc/nginx/nginx.conf(cp /home/frontend/ownsites/nginx.conf /etc/nginx/nginx.conf)
    在这里插入图片描述
  • 重启这个nginx文件夹(systemctl restart nginx)
    在这里插入图片描述
    我们在本机上的ownsites文件夹总创建一个index.js的主js文件
    同时修改文件夹中package.json中的scripts为
"scripts": {
    "start": "node index.js"
  },
  • 服务器端 文件夹中安装我们需要端依赖
    在这里插入图片描述
  • 安装完成后 拉取服务器到本地就有文件node_modules了
    在这里插入图片描述
  • 本地index.js书写
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.json({
    msg: 'hello my website'
  });
});

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`server running on port ${port}`);
});
  • 终端运行 node index.js
    在这里插入图片描述
    在这里插入图片描述

npm 全局安装 forever 启动项目(npm install forever -g)
但是要让forever可用 必须为全局的这些创建软连接

ls | grep npm: ls过滤npm 寻找这里的依赖
这里是找不到 我们刚才安装的forever的
在这里插入图片描述
npm list --depth=0
这里只能看到一个我们安装过的express

创建软连接

在这里插入图片描述

  • 设置forever的软连接 到 usr/bin中(ln -s /usr/local/node/lib/node_modules/forever/bin/forever /usr/bin/)
    在这里插入图片描述
  • vue.js 创建软连接(vue.js是没有办法创建软连接的 所以改动正确的地址)
    在这里插入图片描述
    在这里插入图片描述
这里有点错误:正确的创建软连接是:(ln -s /usr/local/node/bin/vue /usr/bin/)

在这里插入图片描述

  • 创建一个nodemon的软连接(npm install -g nodemon)
    在这里插入图片描述
这里有点错误:正确的创建软连接是:(ln -s /usr/local/node/bin/nodemon /usr/bin/)

在这里插入图片描述

  • nodemon在开发阶段可以比较好的使用 改动文件不用重复启动 但是项目完成后, nodemon一旦服务器断开,nodemon就没用了
  • 当项目完成的时候还是使用forever 服务器不会断开连接
    forever启动:forever start index.js
    forever停止:forever stop index.js
    nodemon启动:nodemon index.js
    在这里插入图片描述

前端页面使用后端接口

前端页面创建一个vue-app 项目
vue create .

vue add axios
在这里插入图片描述
在这里插入图片描述
本地vue文件vue.config.js设置跨域 app.vue取数据

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <p>{{apis.name}}</p>
    <p>{{apis.msg}}</p>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  data() {
    return {
      apis: {}
    };
  },
  created() {
    //钩子函数 进来就执行
    axios.get("/api/datas").then(res => {
      console.log(res.data);
      this.apis = res.data;
    });
  },
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  • 本地项目打包 npm run build
    在这里插入图片描述
    在这里插入图片描述
    将打包的dist文件夹 放到服务器中你的站点中去这里是放在了ownsites下client文件中
    在这里插入图片描述
  • 后台配置路由:index.js
onst express = require('express');
const path = require('path');
const app = express();

//处理静态文件 把dist作为静态文件
app.use(express.static('client/dist'));

// 这里设置路由, 如果访问的是根路径 让他跳转,发送前端静态文件 
app.get('/', (req, res) => {
  res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
});
  • 重启后端(forever restart index.js)
    在这里插入图片描述
    大功告成!!!!!!!!

本文链接http://www.taodudu.cc/news/show-1944624.html