NMP（Linux + Nginx + MySQL + PHP）编译安装详解

LNMP是一种常见的网站框架，由Linux、Nginx、MySQL和PHP组成。本指南将详细介绍如何通过编译安装各组件，搭建LNMP环境。

安装Linux操作系统

1. 下载并安装Linux发行版选择适合你的Linux发行版，如Ubuntu、CentOS等。按照安装指南完成操作系统的安装。

安装Nginx

1. 安装编译Nginx所需的依赖库
2. sudo apt update sudo apt install build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev
3. 下载Nginx源码包
4. wget http://nginx.org/download/nginx-1.20.1.tar.gz # 替换为最新版本号
5. 解压源码包
6. tar -zxvf nginx-1.20.1.tar.gz
7. 进入解压后的目录
8. cd nginx-1.20.1
9. 执行配置命令
10. ./configure
11. 编译并安装Nginx
12. make sudo make install
13. 验证Nginx是否安装成功
14. /usr/local/nginx/sbin/nginx -v

安装MySQL

1. 安装MySQL服务器
2. sudo apt update sudo apt install mysql-server
3. 配置MySQL
4. 在安装过程中会提示设置root用户密码，按照提示操作。

安装PHP

1. 安装编译PHP所需的依赖库
2. sudo apt install build-essential libxml2 libxml2-dev bzip2 libbz2-dev libpng-dev libjpeg-dev libonig-dev libzip-dev libcurl4-openssl-dev libssl-dev
3. 下载PHP源码包
4. wget http://php.net/get/php-8.0.11.tar.gz/from/this/mirror -O php-8.0.11.tar.gz # 替换为最新版本号
5. 解压源码包
6. tar -zxvf php-8.0.11.tar.gz
7. 进入解压后的目录
8. cd php-8.0.11
9. 执行配置命令（可以根据需要自定义配置）
10. ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc --with-fpm --with-mysqli=mysqlnd --with-pdo-mysql=mysqlnd --with-openssl --with-zlib --with-curl --with-gd --with-jpeg-dir --with-png-dir --with-zlib-dir --with-libxml-dir --enable-xml --enable-fpm --enable-mbstring --enable-gd-jis-conv
11. 编译并安装PHP
12. make sudo make install
13. 复制PHP配置文件
14. sudo cp php.ini-development /usr/local/php/etc/php.ini
15. 复制PHP-FPM配置文件
16. sudo cp /usr/local/php/etc/php-fpm.conf.default /usr/local/php/etc/php-fpm.conf
17. 启动PHP-FPM服务
18. sudo /usr/local/php/sbin/php-fpm

配置Nginx与PHP

1. 打开Nginx配置文件
2. sudo nano /usr/local/nginx/conf/nginx.conf
3. 在http块中添加以下内容来配置PHP解析
4. server { listen 80; server_name your_domain.com; root /path/to/your/web/root; index index.php index.html index.htm; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { fastcgi_pass unix:/var/run/php-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } }
5. 将 your_domain.com 替换为你的域名或IP地址。
6. 将 /path/to/your/web/root 替换为你的网站根目录路径。
7. 保存并关闭文件
8. 重启Nginx
9. sudo /usr/local/nginx/sbin/nginx -s reload

总结与进一步配置

到这里，你已经成功搭建了LNMP网站框架。你可以将网站文件放置在指定的网站根目录中，并访问你的域名或IP地址来查看网站。

分析说明表

思维导图

LNMP安装流程

安装Linux操作系统

安装Nginx

安装MySQL

安装PHP

安装依赖库

下载Nginx源码

解压源码包

配置和安装

安装依赖库

下载PHP源码

解压源码包

配置和安装

配置Nginx与PHP

进一步配置和安全性调整

1. 配置防火墙：确保只开放必要的端口（如80和443）。
2. SSL/TLS配置：为Nginx配置SSL证书，提高网站的安全性。
3. PHP安全配置：修改 php.ini 文件，禁用危险的PHP函数，配置PHP错误日志等。

通过上述步骤，你不仅搭建了一个基本的LNMP环境，还可以根据实际需求进行进一步的配置和优化，以确保网站的安全性和性能。希望这篇指南能够帮助你顺利完成LNMP环境的搭建。

言

前一段时间，小编也收集了推荐36种免费React模板和主题「干货」，这次又收集了22种Vue的。希望小伙们喜欢。收集不易，希望点赞+关注。

在Internet上搜索模板和主题时，很难找到免费的Vue资源。

即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了收集22种开源Vue模板和主题框架集合。我不会对此打赌，但是它们也是高质量的资源。

Bootstrap Vue

现场演示：https://bootstrap-vue.org/

github：https://github.com/bootstrap-vue/bootstrap-vue

BootstrapVue 拥有85个以上的组件，45个以上的可用插件，多个指令和670+个图标， 它提供了可用于Vue.js v2.6的Bootstrap v4.5组件和网格系统的最全面的实现之一 ，并具有广泛的功能和自动 WAI-ARIA 可访问性标记。

vue & nuxt 博客网站

现场演示：https://surmon.me/
Github: https://github.com/surmon-china/surmon.me

使用vue & nuxt 搭建建立的非常有风味独特的博客网站。

Vue后台UI框架 - Buefy

现场演示：https://buefy.org/

Github: https://github.com/buefy/buefy/

Buefy 是基于Bulma框架和设计的Vue.js响应式UI组件的轻量级库

特征

• 轻松保留当前的布尔玛主题/变量
• 支持Material Design图标和FontAwesome
• 非常轻巧，除了Vue＆Bulma之外没有任何内部依赖性
• 大约88KB min + gzip（包括布尔玛）
• 语义代码输出
• 遵循布尔玛设计和一些Material Design UX
• 专注于可用性和性能，而无需过度动画的东西

vue后台UI框架 - ant-design-vue

现场演示：https://vue.ant.design
Github: https://github.com/vueComponent/ant-design-vue

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Vue 组件。
• 共享Ant Design of React设计工具体系。

Vue后台UI框架 - vuetifyjs

现场演示：官网:vuetifyjs.com
Github：https://github.com/vuetifyjs/vuetify

Vuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。

vue后台UI框架 - iview

iview官网：https://www.iviewui.com/
Github：https://github.com/iview/iview
官方后台示例：iview-admin：https://github.com/iview/iview-admin

iView Admin是一个前端管理后台集成解决方案。它基于Vue.js并使用UI Toolkit iView。

饿了么出品的UI框架 - element-ui

Vue：http://element-cn.eleme.io/2.0/#/zh-CN/component/quickstart
React：https://eleme.github.io/element-react/#/zh-CN/quick-start
Angular：https://element-angular.faas.ele.me/guide/start

基于Vue2.0和bulma0.2的后台管理框架 - vue-admin

Github：https://github.com/vue-bulma/vue-admin

cd vue-admin
npm install
npm run dev

人人开源 / renren-fast-vue

现场演示：http://demo.open.renren.io/renren-fast (账号密码：admin/admin)

Gitee：https://gitee.com/renrenio/renren-fast-vue

renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案

若依 / RuoYi-Vue

演示地址：http://vue.ruoyi.vip
文档地址：http://doc.ruoyi.vip

RuoYi-Vue 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统

Vue White Dashboard

现场演示：https://demos.creative-tim.com/vue-white-dashboard/?ref=devto

地址：https://www.creative-tim.com/product/vue-white-dashboard?ref=devto

Vue White Dashboard 是一个免费的开源Bootstrap 4和Vue.js Admin仪表板，其中包含大量的组件，这些组件可以组合在一起并看起来非常漂亮。Vue White仪表板具有16个以上的独立组件，可让您自由选择和组合。这意味着有成千上万种可能的组合。所有组件的颜色都可能不同，您可以使用SASS文件轻松进行修改。

Vue QRcode Reader

现场演示：https://gruhn.github.io/vue-qrcode-reader/?rel=nofollow

github：https://github.com/gruhn/vue-qrcode-reader?rel=nofollow

Vue QRcode Reader是一组用于检测和解码QR码的VueJS组件。它使您无需离开浏览器即可检测和解码QR码。所有组件都具有响应能力。除此之外，它接近零样式，因此您可以使它们适合您的布局。使用方法简单明了。

VueJS Expo

现场演示：https://vuejsexpo.com/?ref=devto

VueJS Expo 使用Vue.js框架收集了许多精美的网站，应用程序和实验。如果您是VueJS框架的粉丝，那么这里可能是受到启发的地方。展示包括基于VueJS的主题，元素，仪表板等。

Vue Paper Dashboard PRO

现场演示：https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview?ref=devto

地址：https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Paper Dashboard PRO 是建立在Bootstrap和Vue之上的漂亮资源。它将帮助您立即开始开发仪表板。Vue Paper Dashboard Pro是 Original Paper Dashboard Pro的VueJS移植版本。使用仪表板非常简单，但是需要具备Javascript，Vue和Vue-Router的基础知识。

Vue-Color

现场演示：http://vue-color.surge.sh/?rel=nofollow

Github：https://github.com/xiaokaike/vue-color?rel=nofollow

Vue-Color 是来自Sketch，Photoshop，Chrome，Github，Twitter，Material Design等众多酷炫色彩选择器的集合。

Vue-Koel

现场演示：https://koel.dev/?rel=nofollow

Github：https://github.com/koel/koel?rel=nofollow

Koel 是一种简单的基于Web的个人音频流服务，在客户端用Vue编写，在服务器端用Laravel编写。针对Web开发人员，Koel采用了一些更现代的Web技术-CSS网格，音频和拖放API等来完成其工作。

Vue Argon Dashboard

现场演示：https://demos.creative-tim.com/vue-argon-dashboard/?ref=devto

地址：https://www.creative-tim.com/product/vue-argon-dashboard?ref=devto

Vue Argon Dashboard 是Bootstrap 4和Vue.js的仪表板。它是开源的，免费的，并且具有许多组件，可以帮助您创建出色的网站。Vue Argon仪表板内置了100多个单独的组件，因此您可以选择和组合。由于实现了所有元素，因此从原型制作到功能齐全的代码，您将节省大量时间。该仪表板附带了预先构建的示例，因此开发过程是无缝的，从我们的页面切换到真实的网站非常容易。

Pagekit

现场演示：https://pagekit.com/?rel=nofollow

github：https://github.com/pagekit/pagekit?rel=nofollow

Pagekit 是使用Symfony组件和VueJS构建的模块化，轻量级CMS。不管是个人博客还是公司网站，使用Pagekit都可以为Web创建功能强大的内容，使其在每种设备上都能完美运行。它具有干净直观的界面。它也有一个很棒的内置市场。

Vue Material Dashboard PRO

现场演示：https://demos.creative-tim.com/vue-material-dashboard-pro/?ref=devto#/dashboard

地址：https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Material Dashboard PRO 是基于Vue Material和VueJS构建的超棒高级管理模板。它是通过考虑您在仪表板中实际需要的东西而创建的。Vue Material Dashboard PRO包含精选和优化的VueJS插件。一切都旨在相互配合。使用仪表板非常简单，但是需要具备Javascript，VueJS和Vue Router的基础知识。

Vue Material Kit

现场演示：https://demos.creative-tim.com/vue-material-kit/?ref=devto#/

地址：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Vue Material Kit 是基于Vue Material和VueJS构建的惊人的免费开源资源。这将帮助您立即开始开发UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常简单，但是需要Javascript，VueJS和Vue Router的基础知识。

Retrospectify

现场演示：http://pepf.nl/retrospective/?rel=nofollow

github ：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Retrospectify 是用Vue编写的出色工具，用于数字化敏捷团队回顾。当与远程团队进行回顾时，或者当您希望随时间跟踪回顾结果时，这将很有用。它具有三种注释类型，您可以在注释周围移动或将点添加到各个注释中。

Code Notes

现场演示：https://lauthieb.github.io/code-notes/?rel=nofollow

github ：https://github.com/lauthieb/code-notes?rel=nofollow

最后

如果您尚未使用VueJS，则应该知道它在Github上拥有超过164k的星星和88.7k的星星。很多！同样，Vue是一种开源产品，这意味着任何人都可以为它做贡献或从贡献者那里学到新东西。

我希望这个清单可以在您的下一个开发项目中为您提供帮助

推荐Vue学习资料文章：

《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》

头条创作挑战赛#

前文已经初始化了 workspace-root，从本文开始就需要依次搭建组件库、example、文档、cli。本文内容是搭建 组件库的开发环境。

1 packages 目录

前面在项目根目录下创建了 packages 目录，该目录存放组件库的所有组件及组件库的入口。该目录中已经创建了两个子目录 foo 和 yyg-demo-ui。这两个目录是干嘛用的呢？

1.1 foo 目录

foo 目录代表一个示例组件，后面咱们会使用该组件来测试组件库在 example 和组件库文档中是否能正常运行。后续要开发的所有组件（如高级卡片组件、JSON Schema 表单组件等）都与 foo 组件的文件目录结构保持一致。

1.2 yyg-demo-ui 目录

该目录与整个组件库工程的名称相同，所以你本地的这个目录不一定叫这个名称。该目录是组件库的入口模块，该模块会安装组件库的所有组件（即 packages 目录下的其他包）作为依赖，并引入全部组件，统一暴露。此外还是打包组件库的入口。可以将它理解为组件库的聚合模块。

2 实现 foo 示例组件

2.1 初始化 package.json

foo 目录存放示例组件，它也是一个包，所以需要在命令行中进入 packages/foo 目录，使用 pnpm 初始化：

pnpm init

修改生成的 package.json 中的 name 属性值为 foo，在 monorepo 中，子包的 name 属性通常会命名为 @组织名/foo，由于咱是个组件库，可以将其命名为 @组件库名/foo，即 @yyg-demo-ui/foo。我修改了 package.json 的下面几个属性：

{
  "name": "@yyg-demo-ui/foo",
  "version": "1.0.0",
  "description": "示例组件",
  "author": "程序员优雅哥 youyacoder",
  "main": "index.ts",
...
}

2.2 初始化 foo 目录结构

在命令行中进入 foo 目录：

0. 创建 index.ts 文件，该文件为组件的入口文件：

touch index.ts

2. 创建 src 目录，该目录存放组件的实现源码。在 foo/src/ 中创建 index.tsx 和 types.ts，前者是组件的具体实现，后者是组件的 props 定义及类型：

mkdir src
touch src/index.tsx src/types.ts

如此一来，示例组件 foo 的目录结构便创建完成，目录结构如下：

packages/
|- foo/
        |- index.ts
        |- src/
                |- index.ts
                |- types.ts
|- yyg-demo-ui/

2.3 定义 foo 组件的 props

在 foo/src/types.ts 中定义 foo 组件的 props，并提取其类型：

import { ExtractPropTypes } from 'vue'

export const fooProps = {
  msg: {
    type: String,
    required: false,
    default: ''
  }
}

export type FooProps = ExtractPropTypes<typeof fooProps>

上面的代码定义了一个非必填的属性 msg，并使用 vue 中提供的 ExtractPropTypes 提取 props 的类型。

2.4 实现 foo 组件

在 foo/src/index.tsx 中实现 foo 组件：

import { defineComponent } from 'vue'
import { fooProps } from './types'

const NAME = 'yyg-foo'

export default defineComponent({
  name: NAME,
  props: fooProps,
  setup (props, context) {
    console.log(props, context)
    const onBtnClick = () => {
      console.log('点击按钮测试', props.msg)
    }
    return () => (
      <div class={NAME}>
        <h1>yyg-demo-ui Foo</h1>
        <p class={NAME + '__description'}>msg is: { props.msg }</p>
        <el-button type='primary' onClick={onBtnClick}>点击我</el-button>
      </div>
    )
  }
})

该组件仅简单展示文本和 Element Plus 的按钮，用于测试。

2.5 定义 foo 组件入口文件

foo/index.ts ：

import { App } from 'vue'
import Foo from './src'

Foo.install = (app: App) => {
  app.component(Foo.name, Foo)
}

export default Foo

该文件将组件导入并导出，并且为该组件提供 install 方法。这样便完成了 foo 组件的代码编写。

3 实现 yyg-demo-ui

完成 foo 示例组件后，就需要开始开发组件库入口 yyg-demo-ui 了。第一步仍是初始化 package.json

3.1 初始化 package.json

在命令行中进入 packages/yyg-demo-ui 目录：

pnpm init

同上修改生成的 package.json 文件的 name 属性：

{
  "name": "@yyg-demo-ui/yyg-demo-ui",
  "version": "1.0.0",
  "description": "组件库入口",
  "author": "程序员优雅哥 youyacoder",
  "main": "index.ts",
  ...
}

3.2 安装依赖

foo 和 yyg-demo-ui 都是独立的包，yyg-demo-ui 需要安装 foo 到依赖中，才能引入 foo 组件。在 2.1 中将 foo 的 package.json name 属性修改为 @yyg-demo-ui/foo，安装时要使用该名称。从控制台中进入 packages/yyg-demo-ui ，执行命令：

pnpm install @yyg-demo-ui/foo

此时查看 packages/yyg-demo-ui/package.json 的 dependencies，会看到使用 workspace协议依赖了 foo

"dependencies": {
  "@yyg-demo-ui/foo": "workspace:^1.0.0"
}

同时在 node_modules 中也可以看到多了一个 @yyg-demo-ui/foo：

3.3 定义入口文件

在 packages/yyg-demo-ui 下创建 index.ts，导入组件并导出：

import { App } from 'vue'
import Foo from '@yyg-demo-ui/foo'
// import component end
import '../scss/index.scss'

const components = [
  Foo
] // components

// 全局动态添加组件
const install = (app: App): void => {
  components.forEach(component => {
    app.component(component.name, component)
  })
}

export default {
  install
}

到这里咱们基本完成了组件的开发环境搭建，但遗留了三个问题：

组件及组件库的样式定义

如何查看组件的效果

组件库如何构建打包发布

这些问题在后面的文章中会依次解答。下一篇文章将分享组件库的 CSS 架构和 example 搭建。

感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，程序员优雅哥会持续与大家分享更多干货