ubuntu系统初始化 前端环境配置

本文详细介绍如何为个人项目选择和配置服务器,包括学生优惠购买途径、推荐服务商、操作系统选择、SSH登录设置、常用软件安装及环境配置等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

购买服务器

1.如果你是学生,就去通过学生通道购买 9.9一个月

2.如果不是学生推荐一下链接
板瓦工 推荐1g以上内存(因为node服务器消耗内存比较大)
https://www.bwh1.net/

注意

1.你的域名有没有备案,如果没有备案,购买阿里云时,地区选择香港,主机在国外,域名就不需要备案
2.系统选择ubuntu

登陆

下载安装工具Xshell

点击文件新建

图片描述

名称随意
协议:SSH
主机:服务器的公网IP
端口:22

图片描述

用户名 root
密码:你的密码

登陆

阿里云服务器(腾讯云..)还没完,需要到控制台配置安全组:
允许常用的接口
图片描述

登陆成功后

图片描述

初始化

和window上相似,使用linux系统,就需要安装必要的软件

先更新源码包的仓库

apt-get update -y

在安装软件之前我们先安装几个工具

apt-get install zsh git curl -y

接下来安装zshell

两种方式都可以
第一种:

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

第二种:

sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

安装完zshell后,linux的操作将会比较人性化

此时试着编辑git会出现git的一些命令

更换一下主题

vim ~/.zshrc

图片描述

进去后的状态你是无法编辑的,通过按下键 i 进入插入状态,找到对应位置,把内容改为ys
编辑完成,需要保存退出,按下esc,就是左上角的按键,此时为命令状态,直接输入 :wq 回车

改完之后,需要应用主题,才生效

source ~/.zshrc

添加用户

root为管理员,有最高权限,只是自己用,通常会为其他人创建一个普通用户
添加用户

useradd luyuan

创建用户家目录

mkdir -p /home/luyuan

给用户家目录

chown -R luyuan:luyuan /home/luyuan

授权于用户sudo权限

gpasswd -a luyuan sudo

输入用户密码(输入两次密码,它不显示,输就行了)

passwd luyuan

设置用户密码

usermod -s /bin/bash luyuan

图片描述

几个快捷键:

bash基础特性:快捷键 Ctrl+a 快速跳到命令行首,
Ctrl+e 跳转至命令行行尾
Ctrl+u 删除行首至光标所在处之间的所有字符;
Ctrl+k 删除光标所在处至行尾的所有字符:
ctrl+l: 清屏,相当于clear

安装web运行环境

使用lnmp一键安装包,安装lnmp环境
nginx 可以做反向代理 负载均衡

首先

wget -c http://soft.vpser.net/lnmp/lnmp1.4.tar.gz && tar zxf lnmp1.4.tar.gz && cd lnmp1.4 && ./install.sh lnmp

选择mysql版本,直接敲回车

输入mysql密码

如果在这里面输入错误,请按 Ctrl + backspace 键 删除
输入完成之后,敲回车

选择mysql数据库的引擎,回车

选择php版本,回车

You have 3 options for your Memory Allocator install.回车

安装 node 环境 使用nvm 管理node版本

切回到根目录

cd ~

紧接着

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

配置nvm环境变量

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

回车提示:his loads nvm

安装nodejs

nvm install node

耐心等待...

查看版本

node -v
npm -v

提示版本号则成功

安装mongodb数据库

导入公钥

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

查看自己的操作系统

cat /etc/issue

Ubuntu 12.04

echo "deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

Ubuntu 14.04

echo "deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

Ubuntu 16.04

echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

更新第二步设置的包

sudo apt-get update

安装mongodb-org

sudo apt-get install -y mongodb-org

安装完成之后
安装成功出现以下图示

图片描述

查看mongodb版本

mongod --version

执行 mongo 操作

use shudong
db.stark.insert({'name':'stark','age':18})
db.stark.find({})
exit退出

配置mongodb远程连接

vim /etc/mongod.conf

把bindIp后面的地址删掉,如图
图片描述
同初始化中的4类似

重启服务:

service mongod restart

用远程工具 mongodbbooster测试
打开mongodbbooster,connect --> create --> 把服务器的公网ip替换localhost

图片描述

### 如何设置 Web 前端开发环境来使用 Vue.js #### 创建项目结构并初始化 为了创建一个新的 Vue 3 项目,推荐的方式是通过 Vite 来快速搭建。Vite 是一种新型的前端构建工具,能够显著提升开发体验。 ```bash npm init vite@latest my-vue-app --template vue cd my-vue-app npm install ``` 这组命令会安装必要的依赖包并将项目所需的文件下载下来[^2]。 #### 编写和运行代码 完成上述步骤之后,在 `package.json` 文件内定义了几条常用的脚本指令用于日常开发: - 开发服务器启动:`npm run dev` - 构建生产版本:`npm run build` - 生产预览模式:`npm run preview` 这些命令简化了开发者的工作流,使得操作更加便捷高效。 #### 自定义Webpack配置 对于更复杂的场景,则可能涉及到对 Webpack 的进一步定制化调整。比如可以在工程目录下的 `build/webpack.base.conf.js` 中添加别名路径(alias),以便于模块导入;或是设定 ESLint 规则以保持代码风格一致性[^3]。 ```javascript // webpack.config.js 示例片段 module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, module: { rules: [ // 启用ESLint插件 { test: /\.js$/, enforce: "pre", exclude: /node_modules/, loader: "eslint-loader" } ] } }; ``` #### CI/CD集成自动化部署 为了让持续交付过程更为顺畅,还可以借助 GitHub Actions 实现自动化的测试与发布流程。下面是一个简单的 YAML 工作流示例,它会在每次推送到 master 分支时触发打包编译,并上传至 GitHub Pages 进行展示[^4]。 ```yaml name: Deploy to GitHub Pages on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install and Build run: | npm install npm run build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值